disable/enable input filed when checkbox is checked or unchecked using validations in reactive forms ANGULAR 8

Question

Initally last name and options checkboxes are disbaled. I want to enable last name and options checkboxes when the AllOW checkbox is checked.I am trying to write a custom validation for it, or is there any other way to do it using the form control name
Template

<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}}</pre>
                        </div>

                    </div>
                    <button type="button" 
                   (click)="addEmployeeSkill(empIndex)">Add Skill
                   </button>
                </div>
              </div>
          </div>
    </div>

    <p>
        <button type="submit">Submit</button>
    </p>

</form>

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

You should format the HTML, it's very difficult to follow – Drenai Apr 08 '20 at 06:12 — Drenai, Apr 08 '20 at 06:12

Eliseo · Accepted Answer · 2020-04-09T11:48:28.723

I extended my comment of using a directive (see this SO) because is a few complex to response in a comment.

If we declare a variable

checkList:boolean[]=[]

And use [(ngModel)], -we need use [ngModelOptions]="{standalone:true}"

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

We use simply

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

you can see in the forked stackblitz

Updated the button "submited" can be disabled using simply

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

But, of course, when we create the form we need use validators

  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([])
    });
  }

(*)If we need that there are some elements in array, we need use

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

Yes, it works thanks, but can't it be applied to submit button as well. Submit button should be enable only when first name is filled, ALLOW is checked and skill and exp is selected — rawrstar, Apr 09 '20 at 08:28
@rakshandaBhure, the button is disabled using `[disabled]="!form.valid"` (the directive only apply to "inputs"). but, of course you need, when create the form add the "Validators" (see my updated answer -I update stackblitz too-) — Eliseo, Apr 09 '20 at 11:50
even after entering all the values , and checking up a checkbox, submit button is not getting enabled in your stackblitz — rawrstar, Apr 10 '20 at 07:49

disable/enable input filed when checkbox is checked or unchecked using validations in reactive forms ANGULAR 8

1 Answers1

Linked