Angular ngModel проверяет все флажки - PullRequest
Новая
       26

Angular ngModel проверяет все флажки

0 голосов
/ 14 мая 2019

Попытка установить / снять флажки со всех дочерних элементов с помощью ngModel и все флажки отмечены, но также при попытке проверить только дочерние элементы и все флажки всегда проверены; 

<div>
    <input type="checkbox" [checked]="myVar1" (change)="myVar1 = !myVar1" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child2
  </ul>

Пробовал с использованием свойства [ngModelOptions] = "{standalone: ​​true}", и это приводит к одинаковому поведению - все флажки установлены; 

 <div>
    <input type="checkbox" [checked]="myVar2" (change)="myVar2 = !myVar2" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child2
  </ul>

Как сделать каждый ребенок флажком автономным? stackblitz

1 Ответ

0 голосов
/ 14 мая 2019

Вы используете один и тот же [(ngModel)] для дочернего элемента и родителя, который проверяет дочерний элемент сразу после проверки родительского элемента.

Вы должны иметь разные [(ngModel)] для детей и использовать отмеченную / измененную функцию в родительском флажке, чтобы выполнить проверку всех дочерних элементов, т.е. установить для дочерних элементов ngModel значение true или false.

EX: 

<div>
    <input type="checkbox" [checked]="myVar1" (change)="updateChildSelection($event)" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVarChild1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVarChild2" /> Child2
  </ul>

В компоненте: 

updateChildSelection(event) {
  // set child to true if checked
   if(event.target.checked){
    this.myVarChild1 = true;
    this.myVarChild2 = true
   } else {
   //set child model to false 
   }

}
...