表单控件和表单值中的表单控件名称有区别

Question

我在一个带有表单的 angualr 项目中工作，但是表单控制字段中有一个问题，表单控制字段名称以前是基础，但我注意到尽管给出了一个值，但在提交表单后，表单控制值未定义。 查了项目没出结果，决定改表单控件名（希望能出结果），于是把表单控件名form base改成bace，但是遇到了更奇怪的东西……表单控件名in controls 是 bace，但 value 是 base（并且仍然未定义）

initialForm() {
this.calculateForm = this.fb.group({
  employeeId: [''],
  childrenCount: ['', Validators.required],
  jobPercent: ['', Validators.required],
  additionHour: ['', Validators.required],
  contracts: this.fb.array([
    this.fb.group({
      bace: ['', Validators.required],
      actionDate: ['', Validators.required],
      expirationDate: ['']
    })
  ]),
}
)

}

bace in controls (also in ts and html files)but "base" in form.value

<mat-form-field appearance="outline">
          <mat-label>salary</mat-label>
          <input matInput formControlName="bace" required>
        </mat-form-field>

有谁知道问题出在哪里？

Answer 1

这似乎很奇怪。你能创建一个 Stackblitz 来测试它吗？

我可以建议的另一件事是确保您没有遇到 ASCII 问题，因此文本看起来像 bace 中的“c”，但无法识别该字符（尽管我不认为是这种情况） .

您可以尝试的另一个测试是在模板（或组件类）中打印两种情况的值：

this.calculateForm.get('contracts').controls['bace']

和

this.calculateForm.get('contracts').controls['base']

看看“bace”案例是否能给你更多提示