Angular 14 is saying there is an error on this line

Issue

<span *ngIf="signupForm.get('userData.username')?.errors['nameIsForbidden']" class="help-block">This username is forbidden</span>

In the TS file

  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]),
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
  }


  forbiddenNames(control: FormControl) : {[s: string]: boolean} | null {
    if(this.forbiddenUserNames.indexOf(control.value) !== -1) {
      return {'nameIsForbidden': true};
    }
    return null;
  }

I think the issue is that 'nameIsForbidden' is null at launch so the application crashes. But I dont know how to fix it.

Solution

Have you tried using the non-null assertion operator? The if statement would look something like this

*ngIf="signupForm.get('userData.username')?.errors['nameIsForbidden']!"

The exclamation mark at the end tells the compiler that the property will not be null or undefined.

Answered By - Hristiyan Yanev