Angular7 Reactive Forms 输入 属性 值在 controller/component 中没有变化，仅在 HTML 标记上

Question

我制作了一个具有反应式表单组的可重用组件。我有 2 个输入属性 "name" 和 "Description"，我正在使用 ngFor 设置这些输入属性来迭代组件。

不幸的是，即使我将表单控制组中的 start/default 值设置为输入属性，当我单击提交时 angular 将这 2 个输入属性读取为 'null' 而不是通过输入 属性.

设置的值

表单组 + 输入属性：

  @Input() categoryID;
  @Input() categoryTitle;
  @Input() categoryDescription; 

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

提交函数：

this.startLoading();

this.admin.updateCategory(this.categoryForm.value.categoryTitle, this.categoryForm.value.categoryDescription, this.categoryID)

如果我尝试直接提交有效的输入 属性 的值，但如果我对表单进行修改，我将不再提交更改后的值，因此这没有意义。

Answer 1

您应该在初始化组件视图后创建 FormGroup。所以可以实现AfterViewInit，把下面的代码放在ngAfterViewInit function.

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