Угловые реактивные формы обрабатывают два флажка уровня / размера

Question

Я использую Angular 6/7 с реактивными формами, у меня есть форма со списком разрешений (два флажка в одной строке), например, скажем, каждый флажок является разрешением, по умолчанию второй флажок в строке должен быть отключается при первой загрузке и включается только тогда, когда пользователь нажимает / проверяет первый флажок в строке.

Поток:

1. Пользователь может нажать только на первый флажок в строке, например, разрешение 1,2,3 или 4.
2. Если пользователь нажимает / проверяет первый флажок в строке, на событии onChange мне нужно включить второй флажок.
3. При отправке - мне нужно получить идентификаторы разрешений, а также, если пользователь щелкнул второй флажок в строках, мне нужно получить / сохранить эту информацию в виде логического флага, например, скажем, canGrantPermission: true/false.

Супер простой пример кода: https://stackblitz.com/edit/angular-ibb7ps

В конце я хотел бы иметь что-то вроде этого:

permissions: [
  {permissionId: 1, canGrant: false}, 
  {permissionId: 2, canGrant: true}
]

Answer 1

Приведенное ниже решение основано на предположении, что вам не нужен FormControl на второй флажок, если вы делаете, пожалуйста, дайте мне знать.

---

Вы можете сделать что-то вроде ниже, чтобы сделать это.

Создать templatRef #firstCheck на входе один

<input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i)">

На входе два отключена вторая проверка #firstCheck проверено [disabled]="!firstCheck.checked", а затем создать tempalteRef #secondCheck и установить secondCheck.checked значение для orders.allowGrant по щелчку.

<input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (click)="orders[i].allowGrant = secondCheck.checked">

В submit() подтолкнуть значения к resultsArray если первый флажок установлен и console.log

  const resultsArray = []
      for(let i = 0; i < this.form.get('orders').value.length; i++){
        if(this.form.get('orders').value[i]){
          resultsArray.push({id:this.orders[i].id, allowGrant:this.orders[i].allowGrant})
        }
      }

    console.log(resultsArray);

---

Чтобы снять второй флажок при первом снятии выделения, вы можете сделать что-то вроде ниже.

Я сделал все это в виде без метода... установить secondCheck а также allowGrant ложь при первом клике, используйте (change) на secondCheck вместо (click) как и раньше.

 <input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i); secondCheck.checked = false; orders[i].allowGrant = secondCheck.checked">
    <input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (change)="orders[i].allowGrant = secondCheck.checked">  </label>

пожалуйста, смотрите пересмотренный стек

Stackblitz

https://stackblitz.com/edit/angular-xpcz82?embed=1&file=src/app/app.component.html