提交时，尽管绑定到value属性的属性不是占位符，但用于更新数据的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(''，此后进行了修改以在其中采用变量，并通过创建变量来确保其未设置为“ null”查看初始化后的表格。