属性“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}"/>

组件.html

    <form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Name:</label>
        <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

在我看来，这是TypeScript 中完全不必要的功能。要禁用它，您需要更改文件tsconfig.json：

"compilerOptions": {
// ...
  "noPropertyAccessFromIndexSignature": false,
// ...
}

Answer 2

让我们澄清一下问题是什么。我们正在讨论模板驱动的表单验证。您需要验证某些内容，比如说确保某个字段是必需的（称为firstName）。请注意，从 Angular v13 开始，它对旧代码进行了一些更改，如下所示：

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

对此

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

提醒一下，“？” 是为了确保错误对象不为空。

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

Answer 3

在 tsconfig.json 文件中将此键值更改为 false

“noPropertyAccessFromIndexSignature”：假

Answer 4

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']

登录表单 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>

Answer 5

在 Angular 14.0.4 中，它只对我有用

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

Answer 6

将以下行添加到 tsconfig.json 文件，或者如果已存在，则将其设置为 false

"noPropertyAccessFromIndexSignature": false,