我知道这是一个非常愚蠢的问题，对于像我这样有 SOF 声誉的人来说，不应该问这个问题。然而，我正在拉扯我的头发，似乎不明白我做错了什么。 我指的是一个例子创建反应形式。
在 Stackblitz 中一切看起来都很好，我的代码也运行得很好。但是在 vs code 中我看到错误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.
而不是写作
<div *ngIf = "f.nameType.errors.required">
你应该写
<div *ngIf = "indCustregisterForm.controls['nameType']?.errors.required">