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

Question

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

Поток:

1. Пользовательможно только нажать на первый флажок в строке, например, Права1,2,3 или 4.
2. Если пользователь нажимает / проверяет первый флажок в строке, на событии onChange мне нужно включить второй флажок.
3. При отправке - мне нужно получить идентификаторы разрешений, а также, если пользователь щелкнул второй флажок в строках, мне нужно получить / сохранить эту информацию в виде логического флага, например, позволяетsay 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 в false при первом нажатии, используйте(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>

см. Пересмотренный стек

Стек стек

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