为什么我在角反应形式的 *ngIf 中出错 [英] Why am I getting error in *ngIf of angular reactive form

问题描述

我知道这是一个非常愚蠢的问题，对于有我 SOF 声誉的人来说，不应该问这个问题.但是我一直在扯头发，似乎无法理解我做错了什么.我指的是

解决方案

而不是写

你应该写

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.

解决方案

instead of writing

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

you should write

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

这篇关于为什么我在角反应形式的 *ngIf 中出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！