我知道答案已经给出了,但我想给出一个简短的答案如何更新表单的值,以便其他新来者可以得到一个清晰的想法。
你的表单结构是如此完美,可以用它作为一个例子。因此,在我的回答中,我将把它称为形式。
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
我们的表单是一个FormGroup类型的对象,它有三个FormControl。
There are two ways to update the model value:
Use the setValue() method to set a new value for an individual control. The setValue() method strictly adheres to the structure of
the form group and replaces the entire value for the control.
Use the patchValue() method to replace any properties defined in the object that have changed in the form model.
The strict checks of the setValue() method help catch nesting errors
in complex forms, while patchValue() fails silently on those errors.
From Angular official documentation here
因此,当更新包含多个控件的表单组实例的值时,但您可能只想更新模型的部分。patchValue()是您正在寻找的。
让我们看一个例子。当你使用patchValue()时
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
但是当你使用setValue()时,你需要更新完整的模型,因为它严格遵循表单组的结构。
那么,如果我们写
this.form.setValue({
dept: 1
});
// it will throw error.
我们必须传递表单组模型的所有属性。像这样
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
但我不经常使用这种风格。我更喜欢使用下面的方法,这有助于保持我的代码更干净,更容易理解。
我所做的是,将所有控件声明为单独的变量,并使用setValue()来更新特定的控件。
对于上面的表格,我会这样做。
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
当您需要更新表单控件时,只需使用该属性来更新它。在本例中,提问者试图在用户从下拉列表中选择项目时更新dept表单控件。
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
我建议有一个FormGroup API来了解如何所有的属性和方法的FormGroup。
附加:了解getter参见这里