Angular表单submitted属性报错：需用['submitted']访问的解决方法

问题说明 #

在Angular表单中通过检查submitted状态实现错误反馈时，出现以下报错：

Property 'submitted' comes from an index signature, so it must be accessed with ['submitted'].

相关代码 #

HTML模板代码 #

<form #clientRequestForm [formGroup]="clientRequestForm" (ngSubmit)="newClientRequest()">
<div class="mb-3">
  <label class="form-label" for="username"
    >Username</label
  >
  <input
    type="text"
    class="form-control"
    id="email"
    formControlName="username"
    placeholder="Enter username"
    [class.is-invalid]="clientRequestForm.submitted && clientRequestForm.get('username')?.invalid"
  />
  <div class="invalid-feedback">
    <div>Username is required</div>
    
  </div>
</div>

<div class="mb-3">
  <label class="form-label" for="password">Item Type</label>
  <select name="" formControlName="itemid" class="form-select" id="" [class.is-invalid]="clientRequestForm.submitted&& clientRequestForm.get('itemId')?.invalid">
    <option value="{{item.itemid}}" *ngFor="let item of clientItems">{{item.itemname}}</option>
  </select>
  <div class="invalid-feedback">
    <div>Item is required</div>
    
  </div>
</div>
<div class="mt-5">
    <button type="submit" class="btn btn-success btn-load w-100" type="submit" [disabled]="loading">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2"> {{CheckingText}} </span>
            <span
            *ngIf="loading"
            class="spinner-border flex-shrink-0"
            role="status"
            >
            </span>
        </span>
    </button>
</div>
</form>

组件TS代码 #

clientRequestForm= new FormGroup({
    username: new FormControl(null, Validators.required),
    itemid: new FormControl(null, Validators.required)
  }, {updateOn : 'submit'})

修复方案 #

方案1：按报错提示修改属性访问方式 #

直接将模板中所有的clientRequestForm.submitted改为clientRequestForm['submitted']，示例：

[class.is-invalid]="clientRequestForm['submitted'] && clientRequestForm.get('username')?.invalid"

方案2：解决变量名冲突（推荐） #

当前模板的引用变量#clientRequestForm和组件中的表单实例变量重名，导致类型推断异常。修改模板引用变量名称，比如改为#formRef：

<form #formRef [formGroup]="clientRequestForm" (ngSubmit)="newClientRequest()">

之后判断状态时使用新的引用变量：

[class.is-invalid]="formRef.submitted && clientRequestForm.get('username')?.invalid"

额外修正 #

注意到select控件的有效性判断中，clientRequestForm.get('itemId')存在拼写错误，组件中表单控件名为itemid（小写d），需修正为：

clientRequestForm.get('itemid')?.invalid

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