My form is never submit with a reactive form

Question

I have a problem with the submit of a form with angular. Is not my first project, but first time with this problem.

I have build my form with a formbuilder, my Validation is ok in the html, but when i click on the button, nothing is happening.

I have tried to put breakpoint in my submit function, but it is never used by my form...

I have tried with the (ngSubmit), and by the (click) but it's same.

My app.module

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

My 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);
  }
}

And the 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

Oh God, thanks R. Richards, i was so sur that my html code was correct... In fact, in all my label error, i wrote signupForm['mycontrol'] and not signupForm.controls['myControl'].

Thank to you for the direction.