代码之家 › 专栏 › 技术社区 › naila naseem

使用现有的角反应式数组初始化窗体数组

angular-reactive-forms angular2-forms forms angular

5

naila naseem · 技术社区 · 7 年前

我有一个从服务器获取的部门列表的动态数组。我想在初始化时推那个数组形成数组,基本上我想在数组中显示基于部门名称或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”数组中(从数据库中获取)。

提前谢谢,如有任何建议将不胜感激。

3 回复 | 直到 7 年前

1

12

Fateh Mohamed 6 年前

尝试此操作,准备包含选定和非选定元素的对象数组

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

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

2

Manish Rauthan 7 年前

试试这个。。

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

然后当您从服务器接收到响应时

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

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

3

1

Vikas RyanSand20 7 年前

setValue() &安培; patchValue() . 从服务器收到响应后,只需使用以下方法之一设置/修补值 设置值() 补丁值() 两者都将值设置为 form control 属于 FormGroup 设置值() 设置窗体组的每个窗体控件的值。在中不能忽略任何窗体控件但是,如果只想为FormGroup分配几个表单控件,则可以使用 patchValue().

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

                });
    }

或使用 补丁值()

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }