Angular报TS4111错误：Property 'fName'需用['fName']访问如何解决？

报错根因 #

TS4111报错的核心原因是TypeScript严格模式下，默认的FormGroup.controls属于索引签名类型，语法规则要求索引签名属性必须通过方括号[]访问，不允许直接用点语法。

方案1：快速修复（无需修改TS代码） #

直接修改component.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>

方案2：类型化表单（推荐，Angular14及以上版本适用） #

给表单定义明确的类型，既可以保留点语法的写法，还能获得完整的类型校验能力，修改component.ts代码：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms';

// 定义表单的类型接口
interface SurveyForm {
  fName: FormControl<string | null>
}

@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
    // 给surveyForm指定明确的FormGroup泛型
    surveyForm!: FormGroup<SurveyForm>;
    submitted= false;

 constructor(private  formBuilder: FormBuilder){}

 ngOnInit(){
 this.surveyForm = this.formBuilder.group({
   fName: ['',Validators.required]
  });
}  

// 此时返回的controls自带fName类型定义，无需修改模板点语法
get f() { return this.surveyForm.controls; }

 onSubmit() {
 this.submitted = true;

if (this.surveyForm.invalid) {
    return;
}

alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.surveyForm.value, null, 4));
}

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

低版本Angular（14以下）兼容方案 #

如果使用的Angular版本不支持类型化表单，可以给getter的返回值加类型断言，也可以保留点语法：

get f() { 
  return this.surveyForm.controls as {
    fName: FormControl
  }
}

内容的提问来源于stack exchange，提问作者Chaitanya Chitturi