属性 'fName' 来自索引签名，因此必须使用 ['fName'] 访问

Question

这些是我的文件。我收到此错误有人可以帮助我。

Error: src/app/app.component.html:5:123 - error TS4111: Property 'fName' comes from an index signature, so it must be accessed with ['fName'].
        <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/>

component.html

<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
  <div>
    <lable>Name:</lable>
    <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/>
    <div *ngIf="submitted && f.fName.errors" class="form-control">first name is required</div>
  </div>
</form>

组件.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
    surveyForm!: FormGroup;
    submitted= false;

 constructor(private  formBuilder: FormBuilder){}

 ngOnInit(){
 this.surveyForm = this.formBuilder.group({
   fName: ['',Validators.required]
  });
}  
//name = new FormControl('');
get f() { return this.surveyForm.controls; }

 onSubmit() {
 this.submitted = true;

// stop here if form is invalid
if (this.surveyForm.invalid) {
    return;
}

// display form values on success
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.surveyForm.value, null, 4));
}

 onReset() {
this.submitted = false;
this.surveyForm.reset();
}}

模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
//import { FormBuilder } from '@angular/forms';

@NgModule({
 declarations: [
   AppComponent
 ],
imports: [
 BrowserModule,
 AppRoutingModule,
 FormsModule,
 ReactiveFormsModule,
 //FormBuilder
 ],
//declarations: [AppComponent],
  providers: [
 //FormBuilder
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

Answer 1

让我们澄清一下问题所在。我们正在谈论模板驱动的表单验证。你需要验证一些东西，比如说确保一个字段是必需的（称之为 firstName）。 请注意，从 Angular v13 开始，它与旧代码相比有所改变，如下所示：

<div *ngIf="firstName.errors?.required">First Name is required</div>

到这里

<div *ngIf="firstName.errors?.['required']">First Name is required</div>

提醒一下，'?'就是保证errors对象不为null。

更多详情在这里：https://angular.io/guide/form-validation

Answer 2

Angular 13 Form Validation with Reactive Forms and Form Builder，我在 Angular 文档中找到了解决方案，它们与 Angular 12 有一些不同，你可以试试这个：

<div *ngIf="submitted && surveyForm.get('fName')?.valid" class="form-control">first name is required</div>

Answer 3

Angular 13 表单验证与响应式表单示例

添加 form() getter 以便轻松访问 *.component.ts 文件中的表单字段

//convenience getter for easy access to form fields
get form(): { [key: string]: AbstractControl; }
{
    return this.signInForm.controls;
}

访问电子邮件字段错误示例

form['email'].errors

form['email'].errors['required']

form['email'].errors['email']

signInForm HTML 示例

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

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" formControlName="email" class="form-control"
            [ngClass]="{ 'is-invalid': submitted && form['email'].errors }" />
        <div *ngIf="submitted && form['email'].errors" class="invalid-feedback">
            <div *ngIf="form['email'].errors['required']">
                Field is required
            </div>
            <div *ngIf="form['email'].errors['email']">
                Email format is invalid
            </div>
        </div>
    </div>

    <div class="form-group mt-3">
        <label for="password">Password</label>
        <input type="password" formControlName="password" class="form-control"
            [ngClass]="{ 'is-invalid': submitted && form['password'].errors }" />
        <div *ngIf="submitted && form['password'].errors" class="invalid-feedback">
            <div *ngIf="form['password'].errors['required']">
                Password is required
            </div>
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-between">
        <button type="submit" [disabled]="isLoading" mat-flat-button color="primary">
            <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
            Sign in
        </button>
    </div>

</form>