Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Disable a field based on selected checkbox

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  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);
    }
  }

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading