Question

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

ToDo？

1）我如何填充或初始化所有dept复选框的列表，并且那些应该是真的，这些复选框在我的＆＃39; SelectedDeptList＆＃39;中存在或存在。 array（从db获取）。

在此先感谢，任何建议将不胜感激。

Answer 1

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

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

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

Answer 2

尝试一下。

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

然后，当您收到服务器的响应时，请

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

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

Answer 3

要预先填充数据，FormGroup实例有两种方法。 setValue()＆amp; patchValue()。收到服务器的响应后，只需使用以下方法setValue()和patchValue()之一设置/修补值，两者都会设置form control FormGroup中的值。 setValue()设置FormGroup的每个表单控件的值。您不能在setValue()中省略任何表单控件，但如果您只想分配FormGroup的几个表单控件，那么您可以使用patchValue().

 UpdateForm(){
        this.userForm.setValue(
                 {
                    'phone' : '112345',//some Value
                   'departmentList': this.this.departmentList

                });
    }

或使用patchValue()。如果要更新partcular formControl

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }

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

3 个答案: