Disable a field based on selected checkbox-CodePudding

I want to disable input field if selected checkbox is not equal to Other Contingencies , so there are multiple checkboxes my sample code is below.

#html code

 <ul>
                <li *ngFor="let contigency of contingencies">
                  <mat-checkbox 
                  class="checkbox-margin"
                  color="primary"
                  (change)="changeCurrentContingencies($event,contigency)"
                  >
                  <mat-form-field  appearance="fill"  *ngIf="contigency.text === 'Other Contingencies'; else text" matInput>
                    <mat-label>{{contigency.text}}</mat-label>
                    <input 
                      [disabled]=""
                      name = "otherContingency"
                      matInput
                      [(ngModel)]="dealDispositionFormFields.otherContingency"
                      >
                      <span matPrefix *ngIf="dealDispositionFormFields.otherContingency">$</span>
                  </mat-form-field>
                  <ng-template #text>
                  {{contigency.text}}
                  </ng-template>
                  </mat-checkbox>      
                </li>
              </ul>

#ts code snippet

  contingencies = [
    {id: 1, text: 'Financing Contigency'},
    {id: 2, text: 'Site Plan Approval Contigency'},
    {id: 3, text: 'Permit Approval Contingency'},
    {id: 4, text: 'Tenant Approval Contingency'},
    {id: 5, text: 'Other Contingencies'},
  ]
  changeCurrentContingencies(e:any,rowData:any){   
    if(e.checked){
      this.selectedContingencies.push(rowData);
    }else {
      this.removeSelectedContingency(rowData);
    }
  }

CodePudding user response：

is that what you are looking for?

<ul>
  <li *ngFor="let contigency of contingencies">
    <mat-checkbox class="checkbox-margin"
                  color="primary"
                  (change)="changeCurrentContingencies($event,contigency)"
                  #checkbox>
    <mat-form-field appearance="fill" *ngIf="contigency.text === 'Other Contingencies'; else text">
      <mat-label>{{contigency.text}}</mat-label>
      <input [disabled]="checkbox.checked"
             name="otherContingency"
             matInput
             [(ngModel)]="dealDispositionFormFields.otherContingency" />
      <span matPrefix *ngIf="dealDispositionFormFields.otherContingency">$</span>
    </mat-form-field>
    <ng-template #text>
    {{contigency.text}}
    </ng-template>
    </mat-checkbox>
  </li>
</ul>