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

Related searches

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>

instead of writing

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

you should write

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

Validating form input, In a reactive form, you can always access any form control through the get <div *ngIf="name.errors.minlength"> Name must be at least 4 characters long. Reactive forms in Angular 10 provide a model-driven approach to handling form inputs whose values change over time. Reactive Forms can create and update a primary form control, progress to using multiple controls in the group, validate form values, and create dynamic form controls where you can add or remove controls at run time.

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

Show Validation Error Messages for Reactive Forms in Angular 9 , We can define a reactive form within a component and check if the form To Do <span class="text-danger" *ngIf="formGroup.get('toDo').errors� In Reactive forms, we need to import "ReactiveFormsModule" from angular forms library. we will use FormControl, FormGroup, FormArray, Validation classes with Reactive forms in angular 10 app. If you have simple and basic form in your angular 10 application then i will prefer to use Reactive forms in angular. here i write simple example of

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

Model-Driven Form Validation • Angular, Finally, we can add validation error messages so the user knows how to make the form We can get a reference to these form control instances in our template � I am going to show you example of password and confirm password validation in angular reactive form. this example will help you angular password match validation. you can see password and confirm password validation in angular reactive form. it's simple example of password and confirm password validation in angular 8.

Custom Form Validators • Angular, In this video I'm using an online editor called Plunker to write and run Angular code. 2, We get the email value from the form control. Copy <div class="form- control-feedback" *ngIf="email.errors && (email.dirty || email.touched)"> OnInit } from '@angular/core'; import { ReactiveFormsModule, FormsModule, FormGroup, � Descriptionlink. A shorthand form of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template.Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

Build {Cross-field / Transitive Validators} for {Reactive Forms}, Advantages of Reactive Forms over Template Driven Forms stem from the fact, However, there are aspects to form handling, in particular field validation and respective error In reactive form setup, having *ngIf ain't going to do any good. To use reactive forms, import ReactiveFormModule from the @angular/forms package and add it to your NgModule's imports array. For more validators, you can use ng2-validation which provide you with…

You can easily file upload with angular 6, angular 7, angular 8, angular 9 and angular 10 application. In this example, i want to share with you how to file upload with form data in angular. we will see example of angular reactive form file upload. we will use reactive form with file upload in angular step by step. i also created api for store

Comments
  • Does vs code show by hovering over f.prefix or f.firstName the same error?
  • 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
  • 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.