使用角反应形式的现有数组初始化表单数组答案

【问题标题】：Initialize Form Array With existing array in angular reactive form使用角反应形式的现有数组初始化表单数组
【发布时间】：2018-11-06 02:17:42
【问题描述】：

我有一个从服务器获取的部门列表的动态数组。我想在初始化时推送该数组以形成数组，基本上我想根据数组中的部门名称或 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>

待办事项？

如何填充或初始化所有部门复选框的列表，以及那些在我的“SelectedDeptList”数组中存在或存在的复选框（从数据库中获取）应该为真。

提前致谢，如有任何建议，我们将不胜感激。

【问题讨论】：

标签： angular forms angular2-forms angular-reactive-forms

【解决方案1】：

要预填充数据，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()。如果你想更新一个特定的formControl

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }

【讨论】：

感谢您的回答。 patch value 只是修补那些被选中并存储在 db 中的复选框。但首先在补丁之前我必须显示所有复选框，然后是补丁值。

【解决方案2】：

试试这个，准备一个包含选定和非选定元素的对象数组

let departmentControl = <FormArray>this.userForm.controls.departmentList;

this.yourArray.forEach(department => {
  departmentControl.push(this.fb.group({name: department.name}))
})

【讨论】：

【解决方案3】：

试试这个..

let departmentControl = this.form.get('departmentList') as FormArray).controls;

然后当你收到来自服务器的响应然后做

我假设data['departmentListdata']中的数据是数组形式

data['departmentListdata'].forEach((department) => { this.departmentList.push(this.createDepartment(department)) 
});

【讨论】：