FormBuilder error: "Cannot find control with name"

Ionic Framework ionic-v3
1

Hi,
I have a problem with a form done with FormBuilder.

The form is:

      <div id="todo_form" color="primary">
          <form [formGroup]="resetPasswordForm"  (ngSubmit)="onSubmit(resetPasswordForm.value)">
      
            <ion-item>
              <ion-label position="floating" color="primary">{{ 'E-mail' | translate }}</ion-label>
              <ion-input type="text" formControlName="email"></ion-input>
            </ion-item>
            <div class="validation-errors" *ngIf="resetPasswordForm.get('email')">
              <ng-container *ngFor="let validation of validation_messages.email">
                <div class="error-message" *ngIf="resetPasswordForm.get('email').hasError(validation.type) && (resetPasswordForm.get('email').dirty || resetPasswordForm.get('email').touched)">
                  <ion-icon name="information-circle-outline"></ion-icon> {{ validation.message | translate}}
                </div>
              </ng-container>
            </div>
	</div>

with this code:

  constructor(private formBuilder: FormBuilder,
              private navCtrl: NavController,...){

    this.resetPasswordForm = this.formBuilder.group({
        email: ['', Validators.compose([
          Validators.required,
          Validators.pattern('^[\\s]*[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+[\\s]*$')
        ])],
      }
    );

    this.validation_messages = {
      'email': [
        {type: 'required', message: 'Email is required.'},
        {type: 'pattern', message: 'Please enter a valid email.'}
      ]
    };
  }

Sometimes, not ever, I have this error in the Chrome console:

ERROR Error: Cannot find control with name: 'email' at _throwError (vendor.js:62846)

When this error happens the validation of the form doesn’t work.

How is it possible that the control “email” is not found?
And why does it happen only in some circumstances?

any help will be appreciated, thank you very much.

Claudio

2

Most frequently the answer to this is “there’s an undiagnosed race condition buried somewhere”. Can you provide access to an MCVE such as on StackBlitz or GitHub? Race conditions are really hard to diagnose from out-of-context code snippets, because most often the crucial part of the code isn’t obvious to the author (or else they would have noticed it themselves).

3

any solution? i have the same issue :exploding_head: