Why am I getting error in *ngIf of angular reactive form

Question

I understand this is a very stupid question and for someone with my SOF reputation should not be asking.Howvever I am pulling my hair and can't seem to understand what I am doing wrong. I am referring to an example on Stackblitz to create reactive form.

In Stackblitz everything seems fine and my code works fine too.But in vs code I see error Identifier 'nameType' is not defined. '__type' does not contain such a memberAngular Code :

 <div>
<label>Name Type</label>
<mat-select formControlName="nameType" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
  <mat-option *ngFor="let obj of nameTypeSelection" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
</mat-select>
<div *ngIf="submitted && f.nameType.errors" class="invalid-feedback">
        <div *ngIf="f.nameType.errors.required">Name Type is required</div>
      </div>

  // Form Variable for Ind Cust
  indCustregisterForm: FormGroup;
  submitted = false;
  
   ngOnInit() {
    this.indCustregisterForm = this.formBuilder.group({
      prefix: ['', Validators.required],
      nameType: ['', Validators.required],
      firstName: ['', Validators.required],
      middleName: [''],
      lastName: ['', Validators.required],
      gender: ['', Validators.required],
      dateOfBirth: ['', Validators.required],
      citizenship: ['', Validators.required]
    });
  }
  // convenience getter for easy access to form fields of Individual Customer Form
  get f() {
    return this.indCustregisterForm.controls;
  }
  
  onSubmit() {
    this.submitted = true;
    if (this.indCustregisterForm.valid) {
      console.log('Success')
    }

    // stop here if form is invalid
    if (this.indCustregisterForm.invalid) {
     console.log('Error')
      });
      return;
    }

  }

<!-- Individual Customer Form -->
<form [formGroup]="indCustregisterForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name Type</label>
    <mat-select formControlName="nameType" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of nameTypeSelection" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.nameType.errors" class="invalid-feedback">
            <div *ngIf="f.nameType.errors.required">Name Type is required</div>
          </div>
  </div>

  <div>
    <label>Prefix</label>
    <mat-select formControlName="prefix" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of prefixes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.prefix.errors" class="invalid-feedback">
            <div *ngIf="f.prefix.errors.required">Prefix is required</div>
          </div>
  </div>

  <div>
    <label>First Name</label>
    <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
    <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
          </div>
  </div>

  <div>
    <label>Middle Name (Optional)</label>
    <input type="text" formControlName="middleName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.middleName.errors }" />
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
      <div *ngIf="f.lastName.errors.required">Last Name is required</div>
    </div>
  </div>

  <div>
    <label>Gender</label>
    <mat-select formControlName="gender" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }">
      <mat-option *ngFor="let obj of genders" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
            <div *ngIf="f.gender.errors.required">Gender is required</div>
          </div>
  </div>
  <div>
    <input
      matInput
      [min]="minDate"
      [max]="maxDate"
      [matDatepicker]="picker"
      formControlName="dateOfBirth"
      placeholder="Choose Date of Birth"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <div *ngIf="submitted && f.dateOfBirth.errors" class="invalid-feedback">
            <div *ngIf="f.dateOfBirth.errors.required">Date of Birth is required</div>
          </div>
  </div>
  <div>
    <label>Citizenship</label>

    <mat-select formControlName="citizenship" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of citizenships" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.citizenship.errors" class="invalid-feedback">
            <div *ngIf="f.citizenship.errors.required">Citizenship is required</div>
          </div>
  </div>
  <div class="form-group">
    <button>Save</button>
  </div>
</form>

I have attached a snapshot of my Screen. Why am I getting error in VS Code.

Does vs code show by hovering over f.prefix or f.firstName the same error? — Batajus
– Batajus, Commented May 16, 2019 at 18:27
For nametype Identifier 'nameType' is not defined. '__type' does not contain such a memberAngular and for prefix Identifier 'prefix' is not defined. '__type' does not contain such a memberAngular — Cpt Kitkat
– Cpt Kitkat, Commented May 16, 2019 at 18:50

Cpt Kitkat · Accepted Answer · 2019-07-30 09:00:35Z

4

instead of writing

<div *ngIf = "f.nameType.errors.required">

you should write

<div *ngIf = "indCustregisterForm.controls['nameType']?.errors.required">

edited Jul 30, 2019 at 9:00

Cpt Kitkat

1,4024 gold badges36 silver badges56 bronze badges

answered Jul 29, 2019 at 10:23

user11851731

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ritchie · Accepted Answer · 2019-05-24 23:22:41Z

1

This is a type safety issue. Your getter

get f() {
    return this.indCustregisterForm.controls;
  }

is returning a FormGroup type which doesn't know about nameType, prefix, etc... properties.

You need to use the built in get() method to retrieve controls. More info: https://angular.io/api/forms/AbstractControl#get

answered May 24, 2019 at 23:22

Ritchie

5724 silver badges15 bronze badges

Comments

setayesh · Accepted Answer · 2021-08-14 18:44:07Z

  // Form Variable for Ind Cust
  indCustregisterForm: FormGroup;
  submitted = false;
  
   ngOnInit() {
    this.indCustregisterForm = this.formBuilder.group({
      prefix: ['', Validators.required],
      nameType: ['', Validators.required],
      firstName: ['', Validators.required],
      middleName: [''],
      lastName: ['', Validators.required],
      gender: ['', Validators.required],
      dateOfBirth: ['', Validators.required],
      citizenship: ['', Validators.required]
    });
  }
  // convenience getter for easy access to form fields of Individual Customer Form
  get f() {
    return this.indCustregisterForm.controls;
  }
  
  onSubmit() {
    this.submitted = true;
    if (this.indCustregisterForm.valid) {
      console.log('Success')
    }

    // stop here if form is invalid
    if (this.indCustregisterForm.invalid) {
     console.log('Error')
      });
      return;
    }

  }

<!-- Individual Customer Form -->
<form [formGroup]="indCustregisterForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name Type</label>
    <mat-select formControlName="nameType" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of nameTypeSelection" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.nameType.errors" class="invalid-feedback">
            <div *ngIf="f.nameType.errors.required">Name Type is required</div>
          </div>
  </div>

  <div>
    <label>Prefix</label>
    <mat-select formControlName="prefix" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of prefixes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.prefix.errors" class="invalid-feedback">
            <div *ngIf="f.prefix.errors.required">Prefix is required</div>
          </div>
  </div>

  <div>
    <label>First Name</label>
    <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
    <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
          </div>
  </div>

  <div>
    <label>Middle Name (Optional)</label>
    <input type="text" formControlName="middleName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.middleName.errors }" />
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
      <div *ngIf="f.lastName.errors.required">Last Name is required</div>
    </div>
  </div>

  <div>
    <label>Gender</label>
    <mat-select formControlName="gender" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }">
      <mat-option *ngFor="let obj of genders" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
            <div *ngIf="f.gender.errors.required">Gender is required</div>
          </div>
  </div>
  <div>
    <input
      matInput
      [min]="minDate"
      [max]="maxDate"
      [matDatepicker]="picker"
      formControlName="dateOfBirth"
      placeholder="Choose Date of Birth"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <div *ngIf="submitted && f.dateOfBirth.errors" class="invalid-feedback">
            <div *ngIf="f.dateOfBirth.errors.required">Date of Birth is required</div>
          </div>
  </div>
  <div>
    <label>Citizenship</label>

    <mat-select formControlName="citizenship" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }">
      <mat-option *ngFor="let obj of citizenships" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.citizenship.errors" class="invalid-feedback">
            <div *ngIf="f.citizenship.errors.required">Citizenship is required</div>
          </div>
  </div>
  <div class="form-group">
    <button>Save</button>
  </div>
</form>

harkesh kumar · Accepted Answer · 2019-07-30 09:57:40Z

0

Hi am not Sure what you trying to ask are you asking about error msg or you if you have error you not able to submit or save data

if You want to all Required data should fill in before save info then this work

<form [formGroup]="indCustregisterForm" (ngSubmit)="onSubmit()">

<div class="form-group">
      <button [disabled]="!indCustregisterForm.valid" mat-flat-button color="primary">Submit</button>
  </div>

Error Msg

if you trying to show error message while you enter value in each field then its depend on what you using if you using Bootstrap or angular material they Both have different way to use error msg Bootstrap Examle

<input id="name" class="form-control"
      formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>
</div>

Angular Material

Mat-error class to show error msg

answered Jul 30, 2019 at 9:57

harkesh kumar

9032 gold badges14 silver badges35 bronze badges

1 Comment

Cpt Kitkat Over a year ago

I am trying to know why VS code is showing error *ngIf = "f.nameType.errors.required. I have uploaded a snapshot too... My form is working fine and I can save data that is not an issue.

Collectives™ on Stack Overflow

Why am I getting error in *ngIf of angular reactive form

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related