angular - 尽管绑定到值属性而不是占位符，但提交时用于更新数据的 Angular Reactive Forms 输入的默认值是“未定义”

Question

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

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

我的标记是：

<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('' 并且已经修改为在此处获取一个变量，并通过在视图初始化后创建表单来确保它没有设置为“空”。