在Angular 7中,当使用formbuilder
初始化多选框的值时,可能会导致表单无效的问题。这是因为formbuilder
初始化的值是一个数组,而多选框的值应该是一个对象数组。
下面是解决这个问题的示例代码:
首先,在组件的构造函数中导入和初始化formbuilder
:
import { FormBuilder, FormGroup } from '@angular/forms';
constructor(private formBuilder: FormBuilder) { }
然后,在组件的ngOnInit
方法中使用formbuilder
创建表单控件并初始化多选框的值:
ngOnInit() {
this.myForm = this.formBuilder.group({
// 其他表单控件
myMultiSelect: [[]] // 初始化为一个空数组
});
}
接下来,在模板中使用ngFor
指令遍历多选框选项,并将每个选项绑定到表单控件:
最后,在组件中定义多选框选项的数组:
multiSelectOptions = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
// 其他选项
];
通过以上步骤,你就可以在Angular 7中正确地使用formbuilder
初始化多选框的值,并使表单有效。