Angular реактивная форма - флажки - Инициализировать formArray с существующим массивом - PullRequest
Новая
       38

Angular реактивная форма - флажки - Инициализировать formArray с существующим массивом

1 голос
/ 03 августа 2020

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

export class BoardTypeList{
id number;
descr string;
}

компонент: 

lkBoardTypeList: LkBoardType[] = []; 
SelectedLkBoardTypeList: LkBoardType[] = []; 

this.boardDashboardForm = this.formBuilder.group({
                    id: new FormControl(this.boardObj.id, Validators.required),
                    location: new FormControl(this.boardObj.location),
                    boardType: new FormArray([])
                 });
this.addCheckBoxes();

..//..//

 addCheckBoxes(){
        this.lkBoardTypeList.forEach(() => this.boardTypeFormArray.push(new FormControl(false)));
    }

 get boardTypeFormArray(){ 
        return this.boardDashboardForm.controls.boardType as FormArray;
    }

loadSelected(event){
    
        this.boardService.getBoardTypeById(event.value).subscribe( posts =>{
            this.data = posts; 
            console.log('getBoardTypeById',this.data);
            },
            error => { 
            console.log('getBoardTypeById - error',error);
            this._errorService.handleError(error); 
            }, 
            () => {   
            this.SelectedLkBoardTypeList = this.data.boardTypes;
            for (let i = 0; i < this.lkBoardTypeList.length; i++) {
            ..///.. what code goes here
            }
            }); 
}

И в HTML

<div class="row">
                
                <div class="col-sm-2">                
                    <p-dropdown [options]="boardArray" formControlName="id"  (onChange)="loadSelected($event)" placeholder=" Select "></p-dropdown> 
                </div>
                
            </div>
    <div class="form-group" >
                        <div formArrayName="boardType" *ngFor="let c of boardTypeFormArray.controls; let i = index">
                            <input class="col-sm-1" type="checkbox" [formGroupName]="i"/>
                            <span class="col-sm-5" >{{lkBoardTypeList[i].descr}}</span>
                        </div>
                    </div>

RightNow, когда я проверяю элемент, я вижу formArrayName = "boardType" и элемент флажка следующим образом: 

<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="0">
<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="1">
<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="2">

Я предполагаю, что ng-reflection -name = "0" не что иное, как значение 'i'. Что я пытаюсь установить значение массива с идентификатором из lkBoardTypeList, который равен 10,20,30.

Также, пожалуйста, дайте мне знать, как установить значения для отмеченных флажков. SelectedLkBoardTypeList - скажем, например, весь список имеет значения (10,20,30). selectedList содержит только 10, и его необходимо проверить.

1 Ответ

1 голос
/ 03 августа 2020

Прежде всего, вы должны использовать [formControlName]="i" вместо [formGroupName]="i"

* Атрибут 1005 * добавлен для целей отладки и показывает привязки ввода, которые компонент / директива объявил в своем классе.

FormControlName директива объявляет 

@Input('formControlName') name!: string|number|null;

Итак, вы правы: ng-reflect-name="0" описывает значение, которое вы передаете в formControlName input.

Если вы хотите предварительно заполнить FormArray с помощью SelectedLkBoardTypeList, вы можете просто проверить, существует ли указанный c элемент в SelectedLkBoardTypeList. Допустим, у вас есть: 

SelectedLkBoardTypeList: LkBoardType[] = [
  {
    id: 10,
    descr: 'Type 1'
  }
];

, тогда ваш метод addCheckBoxes должен быть следующим: 

addCheckBoxes() {
  this.lkBoardTypeList.forEach((type) => {
    const selected = this.SelectedLkBoardTypeList.some(x => x.id === type.id);
    this.boardTypeFormArray.push(new FormControl(selected))
  });
}

Наконец, если вы хотите получить выбранные элементы во время выполнения публикации, вы можете сопоставить выбранные значения в FormArray в исходный массив: 

save() {
  const model = this.boardDashboardForm.value;

  const selectedTypes = model.boardType.filter(Boolean).map((_, i) => this.lkBoardTypeList[i]);
  console.log(selectedTypes);
}

Пример Ng-run

...