Angular Reactive Forms 更新数据的默认输入值在提交时是 'undefined' 虽然绑定到值 属性 不是占位符

Question

我在 Angular 中制作了一个可重复使用的组件，我用它来构建多个表单，目的是提供一种快速修改多个数据项的方法。

我在这个组件中有 2 个输入字段，当使用 *ngFor 迭代数组时，我通过输入属性绑定它们。一切都很好，并且可以很好地使用 ids 并显示数据，但我遇到的问题是当我推动更新这两个字段的值时显示为 'undefined'（除非我修改它们）。

我的标记是：

<input 
      #catTitle
      matInput 
      placeholder="Document Title" 
      [value]="categoryTitle"
      formControlName="categoryTitle"
      [errorStateMatcher]="matcher"
      >

我的后端是：

  categoryForm = new FormGroup({
    categoryTitle: new FormControl('', [Validators.minLength(3), Validators.maxLength(50)]),
    categoryDescription: new FormControl('', [Validators.minLength(5), Validators.maxLength(200)])
  })

我敢肯定我错过了一些非常愚蠢的东西。

Answer 1

VI 很快意识到，在我的代码中，我将表单控件的默认值设置为空白：categoryTitle: new FormControl('' 并且已经修改为在那里使用变量并确保它没有设置为 'null' 通过在视图初始化后创建表单。