我从服务器获取了一个动态的部门列表数组。我想在初始化时推送该数组以形成数组,基本上我想显示基于部门名称或数组中的id的复选框。我知道如何在活动表单中推送一个空数组。但是如何使用现有数组进行初始化。实际上它是一个更新/编辑组件
departmentList:any=[]; //array contains all departments
SelectedDeptList:any=[]; //fetched from db , selected departments
userForm: FormGroup;
this.userForm = this.fb.group({ //fb form builder
'phone': [null],
'departmentList': this.fb.array([this.createDepartment()]),
})
createDepartment(): FormGroup {
return this.fb.group({
'name': ''//checkbox value true or false
});
}
模板
<div formArrayName="departmentList"
*ngFor="let item of
userForm.get('departmentList').controls; let i = index;">
<div class="col-md-6" [formGroupName]="i">
<div class="form-group">
<div class="col-md-4">
<label class="mt-checkbox mt-checkbox-outline">
<input formControlName="name" type="checkbox" > Department Name
<span></span>
</label>
</div>
</div>
</div></div>
待办事项?
1)我如何填充或初始化所有dept复选框的列表,那些应该是true,它们存在于我的'SelectedDeptList'数组中(存在于db中)。
在此先感谢,任何建议将不胜感激。
试试这个,准备一个包含选定元素和非选定元素的对象数组
let departmentControl = <FormArray>this.userForm.controls.departmentList;
this.yourArray.forEach(department => {
control.push(this.fb.group({name: department.yourProperty}))
})
要预填充数据,FormGroup实例有两种方法。 setValue()
和patchValue()
。从服务器收到响应后,只需使用以下方法之一设置/修补值,setValue()
和patchValue()
都会设置form control
的FormGroup
中的值。 setValue()
为FormGroup的每个表单控件设置值。您不能在setValue()
中省略任何表单控件但如果您只想指定FormGroup的几个表单控件,那么您可以使用patchValue().
UpdateForm(){
this.userForm.setValue(
{
'phone' : '112345',//some Value
'departmentList': this.this.departmentList
});
}
或使用patchValue()
。如果要更新特定表单Control
UpdateForm(){
this.userForm.patchValue(
{
'departmentList': this.departmentList
});
}
试试这个..
let departmentControl = this.form.get('departmentList') as FormArray).controls;
然后当你收到服务器的响应然后做
我在数据['departmentListdata']中以数组的形式假设数据
data['departmentListdata'].forEach((department) => { this.departmentList.push(this.createDepartment(department))
});