Question

我在提交带有棱角的表单时遇到问题。不是我的第一个项目，而是第一次遇到这个问题。

我已经使用formbuilder构建了表单，我的Validation在html中是可以的，但是当我单击按钮时，什么也没有发生。

我尝试将断点放在我的Submit函数中，但是我的表单从未使用过断点...

我已经尝试了（ngSubmit）和（click），但是都一样。

我的app.module

@NgModule({
  declarations: [
    AppComponent,
    SignUpComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ]

我的signup.component.ts

@Component({
  selector: 'app-sign-up-in',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {

  signupForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private securityService: SecurityService) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.signupForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      firstname: ['', [Validators.required]],
      lastname: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(5)]],
      confirmPassword: [''],
    }, {validator: PasswordValidator.matchingConfirmPasswords});
  }

  onSubmit() {
    const formValue = this.signupForm.value;
    const newCustomer = new Customer(
      formValue['email'],
      formValue['password'],
      formValue['firstname'],
      formValue['lastname']
    );

    this.securityService.registerCustomer(newCustomer);
  }
}

还有html

    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="email">Adresse Email</label>
        <input type="email" class="form-control" id="email" formControlName="email" placeholder="Votre email">
        <label class="text-danger" *ngIf="signupForm.controls['email'].invalid && (signupForm.controls['email'].dirty || signupForm['email'].touched)">
          Veuillez entrer une adresse email valide
        </label>
      </div>
      <div class="form-group">
        <label for="firstname">Prénom</label>
        <input type="text" class="form-control" id="firstname" formControlName="firstname" placeholder="Votre prénom">
        <label class="text-danger" *ngIf="signupForm.controls['firstname'].invalid && (signupForm.controls['firstname'].dirty || signupForm['firstname'].touched)">
          Le prénom est requis
        </label>
      </div>
      <div class="form-group">
        <label for="lastname">Nom</label>
        <input type="text" class="form-control" id="lastname" formControlName="lastname" placeholder="Votre nom">
        <label class="text-danger" *ngIf="signupForm.controls['lastname'].invalid && (signupForm.controls['lastname'].dirty || signupForm['lastname'].touched)">
          Le nom est requis
        </label>
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" class="form-control" id="password" formControlName="password" placeholder="Votre mot de passe">
      </div>
      <div class="form-group">
        <label for="passwordRepeated">Répéter mot de passe</label>
        <input type="password" class="form-control" id="passwordRepeated" formControlName="confirmPassword" placeholder="Répétez votre mot de passe">
        <label class="text-danger" *ngIf="signupForm.hasError('notEquals') && (signupForm.controls['confirmPassword'].dirty || signupForm['confirmPassword'].touched)">
          Le mot de passe de confirmation est différent du premier mot de passe
        </label>
      </div>
      <input type="submit" class="btn btn-primary col-12" [disabled]="!signupForm.valid" value="S'inscrire" />
    </form>

Answer 1

哦，天哪，谢谢R. Richards，我实在太使我的html代码正确了... 实际上，在我所有的标签错误中，我都写了signupForm ['mycontrol']而不是signupForm.controls ['myControl']。

谢谢你的指导。

我的表格永远不会以被动表格的形式提交

1 个答案: