手动设置FormBuilder控件的值

Question

这让我快发疯了，我受够了，不能再花一整天在这上面了。

我试图在组件中手动设置一个控制值（'dept'），但它不起作用——甚至新值也会正确地记录到控制台中。

以下是FormBuilder实例：

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

这是接收所选部门的事件处理程序：

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

现在，当表单提交后，我将退出此操作。表单该字段仍然为空！我见过其他ppl使用updateValue（），但这是测试版。1，我不认为这是调用控件的有效方法。

我还尝试调用updateValueAndValality（），但没有成功：（。

我只会在表单元素上使用ngControl="Dept"，就像我对表单的其余部分所做的那样，但它是一个自定义指令/组件。

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

Answer 1

Angular 2 final更新了API。他们为此增加了许多方法。

要从控制器更新表单控件，请执行以下操作：

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

无需重置错误

参考文献

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Answer 2

在Angular 2 Final（RC5）中，有用于更新表单值的新API。patchValue（）API方法支持部分表单更新，我们只需要指定一些字段：

this.form.patchValue({id: selected.id})

还有一个setValue（）API方法需要一个包含所有表单字段的对象。如果缺少一个字段，我们将得到一个错误。

Answer 3

更新日期：2017年3月19日

this.form.controls['dept'].setValue(selected.id);

旧：

目前，我们被迫进行类型转换：

(<Control>this.form.controls['dept']).updateValue(selected.id)

不太优雅，我同意。希望在将来的版本中得到改进。