Инициализация массива формы с существующим массивом в угловой реактивной форме - PullRequest
Новая
       31

Инициализация массива формы с существующим массивом в угловой реактивной форме

0 голосов
/ 27 мая 2018

У меня есть динамический массив списка отделов, полученный с сервера.Я хочу подтолкнуть этот массив для формирования массива при инициализации, в основном я хочу показать флажки на основе названия отдела или идентификатора в массиве.Я знаю, как вставить пустой массив в реактивные формы. Но как инициализировать существующий массив. На самом деле это обновление / редактирование. Компонент 

 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, и они должны быть истинными, которые присутствуют или существуют в моем массиве 'SelectedDeptList' (извлечено из базы данных).

заранее спасибо, любые предложения будут оценены.

Ответы [ 3 ]

0 голосов
/ 27 мая 2018

попробуйте это, подготовьте массив объектов, которые содержат выбранный и невыбранный элемент 

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

this.yourArray.forEach(department => {
  control.push(this.fb.group({name: department.yourProperty}))
})
0 голосов
/ 02 марта 2019

Попробуйте это .. 

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

затем при получении ответа от сервера выполните

Я предполагаю, что данные в виде массива данных ['DepartmentListdata'] 

data['departmentListdata'].forEach((department) => { this.departmentList.push(this.createDepartment(department)) 
});
0 голосов
/ 27 мая 2018

Для предварительного заполнения данных существует два метода экземпляра 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().Если вы хотите обновить форму формы элемента управления 

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }
...