title: How to apply condition to checkbox in Angular-12 FormArray
body: <p>I have FormArray in Angular-12 as shown below:. I am working on employee work experience, and this will be in form of a FormArray that will be dynamically generated at the click of add button.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>This is the component as shown below:
  
  export class ExperienceFormComponent implements OnInit {
  
    @Input() experienceDetailsForm: FormGroup;
    data: Candidate;
    constructor(private fb: FormBuilder, private candidateService: CandidateService) {}
  
    ngOnInit(): void {
      this.experienceDetailsForm = this.fb.group({
        experiences: this.fb.array([this.createExperienceFormGroup()]),
      });
    }
  
    public addExperienceFormGroup() {
      const experiences = this.experienceDetailsForm.get('experiences') as FormArray;
      experiences.push(this.createExperienceFormGroup());
    }
  
    public removeOrClearExperience(i: number) {
      const experiences = this.experienceDetailsForm.get('experiences') as FormArray;
      if (experiences.length &gt; 1) {
        experiences.removeAt(i);
      } else {
        experiences.reset();
      }
    }
  
    private createExperienceFormGroup(): FormGroup {
      return new FormGroup({
        designation: new FormControl(''),
        type: new FormControl(''),
        location: new FormControl(''),
        organization: new FormControl(''),
        startDate: new FormControl(''),
        endDate: new FormControl(''),
        current: new FormControl(''),
      });
    }
  
    addExperienceDetails() {
      if (this.experienceDetailsForm.dirty) {
        this.data = this.candidateService.getCandidateDetails();
        this.data.experience = this.experienceDetailsForm.value.experiences;
        this.candidateService.setCandidateDetails(this.data);
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Also I have the HTML form for the form array:
  
  &lt;div class="card-body"&gt;
  
    &lt;div formArrayName="experiences"&gt;
      &lt;div *ngFor="let experience of experienceDetailsForm.get('experiences')['controls']; let i = index" [formGroupName]="i"&gt;
  
        &lt;div class="form-group row"&gt;
          &lt;label for="designation" class="col-sm-2 col-form-label text-nowrap"&gt;Position
                                          {{i+1}}:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input type="text" id='designation' maxlength="20" onkeypress='return ((event.charCode &gt;= 65 &amp;&amp; event.charCode &lt;= 90) || (event.charCode &gt;= 97 &amp;&amp; event.charCode &lt;= 122) || (event.charCode == 32))' class="form-control" placeholder="Enter your designation"
              formControlName="designation" required&gt;
          &lt;/div&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;label for="type" class="col-sm-2 col-form-label text-nowrap"&gt;Employment
                                          type:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;select id="type" name="type" class="form-control" formControlName="type"&gt;
              &lt;option value="" disabled selected hidden&gt;Your employment type&lt;/option&gt;
              &lt;option value="parttime"&gt;Part-time&lt;/option&gt;
              &lt;option value="fulltime"&gt;Full-time&lt;/option&gt;
              &lt;option value="internship"&gt;Internship&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-4"&gt;
            &lt;button class="float-left" mat-icon-button color="primary" aria-label="Add" (click)="addExperienceFormGroup()" matTooltip="Add"&gt;
                                              &lt;mat-icon&gt;add_circle_outline&lt;/mat-icon&gt;
                                          &lt;/button&gt;
            &lt;button class="float-left" mat-icon-button color="primary" aria-label="Remove/clear" (click)="removeOrClearExperience(i)" matTooltip="Remove"&gt;
                                              &lt;mat-icon&gt;highlight_off&lt;/mat-icon&gt;
                                          &lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="form-group row"&gt;
          &lt;label for="organization" class="col-sm-2 col-form-label text-nowrap"&gt;Company:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input type="text" id='organization' maxlength="20" class="form-control" placeholder="Company name" formControlName="organization" required&gt;
          &lt;/div&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;label for="startDate" class="col-sm-2 col-form-label text-nowrap"&gt;Starting
                                          date:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input type="date" id="startDate" class="form-control" placeholder="dd-mm-yyyy" value="" formControlName="startDate" required&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="form-group row"&gt;
          &lt;label for="location" class="col-sm-2 col-form-label text-nowrap"&gt;Location:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input class="form-control" id="location" placeholder="Company location" type="text" maxlength="15" formControlName="location" required&gt;
          &lt;/div&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;label for="endDate" class="col-sm-2 col-form-label text-nowrap"&gt;Ending
                                          date:&lt;/label&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input type="date" id="endDate" class="form-control" placeholder="dd-mm-yyyy" value="" formControlName="endDate" required&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group row"&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;mat-checkbox class="col-12" formControlName="current" color="primary"&gt;Currently working here&lt;/mat-checkbox&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;hr&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want:</p>
  <pre><code>&lt;mat-checkbox class=&quot;col-12&quot; formControlName=&quot;current&quot; color=&quot;primary&quot;&gt;Currently working here&lt;/mat-checkbox&gt;
  </code></pre>
  <p>because employee cannot be working in more than a place at a time.
  How do I achieve this?</p>
  <p>Thank you</p>