我的表单永远不会以反应形式提交

My form is never submit with a reactive form

我在使用 angular 提交表单时遇到问题。 不是我的第一个项目,但第一次遇到这个问题。

我已经使用 formbuilder 构建了我的表单,我的验证在 html 中没有问题,但是当我点击按钮时,没有任何反应。

我尝试在我的提交函数中放置断点,但我的表单从未使用过它...

我试过 (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>

哦,天哪,谢谢 R. Richards,我很高兴我的 html 代码是正确的... 事实上,在我所有的标签错误中,我写的是 signupForm['mycontrol'] 而不是 signupForm.controls['myControl'].

谢谢指点