Angular8 Reactive Form Validators Together With Async Validator

Question

I have an error when i try to show an error in the DOM when validating validators & async validators

My error:

ERROR TypeError: Cannot read property 'required' of null at Object.eval [as updateDirectives]

In component html:

<div class="form-group">
            <label for="email">email</label>
            <input 
                type="text"
                id="email"
                formControlName="email"
                class="form-control">
            <div *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched ">
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').errors['required'] && signupForm.get('userData.email').touched">Email
                is required
              </span>
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').errors['email'] && signupForm.get('userData.email').touched">Email
                is not valid
              </span>
            </div>

In component.ts :

ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
  }

Note: when i remove the async validator, (this.forbiddenEmails) from the form control async validator, it works:

'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails)

(Works when i have only validators without async validators i get no error, but i want to show the error for the async validator as well .)

See the solution in stackoverflow.com/questions/50396057/… — Akash
I am using Reactive Form - not Template Driven Form So this is not going to work.... I managed to avoid that error by using 'hasError('errorName') — Shahar Meshulam

Shahar Meshulam Shahar Meshulam · Accepted Answer · 2019-11-24T08:25:10

I fixed this by using "hasError('errorName')":

<div class="form-group">
            <label for="email">email</label>
            <input 
                type="text"
                id="email"
                formControlName="email"
                class="form-control">
            <div *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched ">
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').hasError('required') && signupForm.get('userData.email').touched">Email
                is required
              </span>
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').hasError['email'] && signupForm.get('userData.email').touched">Email
                is not valid
              </span>

Email is not valid

Angular8 Reactive Form Validators Together With Async Validator

1 Answers