отключить / включить входное поле, если флажок установлен или снят, используя проверки в реактивных формах ANGULAR 8

Question

Изначально флажки с фамилией и параметрами отменены. Я хочу включить флажки для фамилии и параметров, когда установлен флажок AllOW. Я пытаюсь написать для него настраиваемую проверку или есть другой способ сделать это, используя имя элемента управления формы
Шаблон

<code><form [formGroup]="empForm" (ngSubmit)="onSubmit()">

    <div formArrayName="employees" >

        <div *ngFor="let employee of employees().controls; let empIndex=index">

            <div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
                {{empIndex}}
                First Name :
                <input type="text" formControlName="firstName">
        <label class="checkbox-inline">
                      <input type="checkbox" />ALLOW</label
                    >
                <div>

                     Last Name:
                <input type="text" formControlName="lastName">
                    <label class="checkbox-inline"  *ngFor="let day of 
                       days; ">
                        <input
                          type="checkbox"
                          formControlName="{{ day.name }}"
                          name="{{ day.name }}"
                           (change)="onChange(empIndex,day.value , 
                        $event.target.checked)"
                        />{{ day.value }}
                      </label>
                </div>
                <button 
                 (click)="removeEmployee(empIndex)">Remove</button>


                <div formArrayName="skills">

                    <div *ngFor="let skill of 
                      employeeSkills(empIndex).controls; let 
                          skillIndex=index">



                        <div [formGroupName]="skillIndex">
                            {{skillIndex}}
                    Skill :
                    <select  formControlName="skill" id="skill">
                     <option>JAVA</option>
                     <option>Python</option>
                     <option>C#</option>
                    </select>
                     Exp:
                    <select  formControlName="exp" id="exp">
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                   </select>


                <button
                   (click)="removeEmployeeSkill(empIndex,skillIndex)">
                Remove</button>

                            <pre>{{skillIndex.value |json}}

Добавить навык

Отправить

https://stackblitz.com/edit/angular-pg1t9r

Answer 1

Я расширил свой комментарий об использовании директивы (см. это SO ), потому что это немного сложно для ответа в комментарии.

Если мы объявим переменную

checkList:boolean[]=[]

И использовать [(ngModel)], - нам нужно использовать [ngModelOptions] = "{standalone: ​​true}"

<input type="checkbox" 
   [(ngModel)]="checkList[empIndex]" 
   [ngModelOptions]="{standalone:true}"/>

Мы используем просто

  <input type="text" formControlName="lastName" 
    [enableControl]="checkList[empIndex]">

, который вы видите в раздвоенном стеке

Обновлено кнопка "submited" может быть отключена с помощью просто

<button [disabled]="!empForm.valid" type="submit">Submit</button> //(*)

Но, конечно, когда мы создаем нам нужно использовать валидаторы

  newEmployee(): FormGroup {
    return this.fb.group({
      firstName: ["",Validators.required],
      lastName: [{value:'', disabled:true},Validators.required],
      option1: [{value:false, disabled:true}],
      option2: [{value:false, disabled:true}],
      option3: [{value:false, disabled:true}],
      skills: this.fb.array([]),
      options: this.fb.array([])
    });
  }

(*) Если нам нужно, чтобы в массиве было несколько элементов, нам нужно использовать

    <button [disabled]="!empForm.valid || !employees.length" 
          type="submit">Submit</button>