Angular2 – 为FormBuilder控件手动设置值

这使我疯狂，我在枪口下，不能再花一整天的时间在这个上面。

我试图在组件内手动设置一个控制值（'dept'），它只是不工作 – 即使是新的值logging到正确的控制台。

这里是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; } 

现在当表单被提交时，我注销了这个表单，这个表单仍然是空的！ 我见过其他人使用updateValue()但这是beta.1，我不认为这是一个有效的方法调用控件。

我也试图调用updateValueAndValidity()没有成功:(。

我只是在表单元素上使用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

更新date：19/03/2017

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

旧：

现在我们被迫做一个types转换：

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

不是很优雅，我同意。 希望这在未来的版本中得到改进。

Answer 2

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

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

还有一个setValue() API方法需要一个包含所有表单字段的对象。 如果有一个字段丢失，我们会得到一个错误。

Answer 3

angular2最终更新了那里的API。 他们为此增加了许多方法。

为了更新从控制器的forms控制器做到这一点

 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 4

你可以试试这个：

 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'].updateValue(selected.id); } 

有关更多详细信息，可以查看关于updateValue方法的第二个参数的相应JS文档： https ： //github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model 。 ＃L269 。

希望能成为你，Thierry

Answer 5

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass); this.form.complexForm.patchValue(cloneObj); 

如果你不想手动设置每个字段。

Answer 6

@ Filoche的Angular 2更新解决scheme。 使用FormControl

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

 import { FormControl } from '@angular/forms'; (<FormControl>this.form.controls['dept']).setValue(selected.id)); 

或者，您可以使用@ AngularUniversity的解决scheme ，它使用patchValue