CODEWITHSUNDEEP
angular
user7554035
user7554035

Reputation: 399

How to enable / disable a button based on a checkbox being checked in Angular

I am trying to add validation to my Angular app's form.

The first section of my form contains:

The button is to be disabled until the user checks the checkbox & chooses an option from both radio button group's.

Here is the code for my button:

<button
    [disabled]="
        theChkAcceptTerms.invalid || 
        theInsuredType.invalid || 
        theReportInjury.invalid
        ">

And here is the code for my checkbox:

<checkbox
    id="accept"
    heading="I accept"
    name="accept"
    value="accept"
    [(ngModel)]="chkAcceptTerms"
    required
    #theChkAcceptTerms="ngModel">
</checkbox>

Currently, when the page loads the button is disabled. It is only enabled once I check the checkbox, & choose an option in both radio groups.

However, if I un-check the checkbox, the button is not disabled.

Can someone please tell me how I can disable the above button if the checkbox is not checked. Thanks a lot!

Upvotes: 3

Views: 23318

Answers (4)

rlv-dan
rlv-dan

Reputation: 1104

I used a template reference variable to connect my checkbox to the buttons disabled state:

<mat-checkbox #confirmed>Yes, I confirm</mat-checkbox>
<button mat-button [disabled]="!confirmed.checked">Delete</button>

Upvotes: 4

Khaled Sameer
Khaled Sameer

Reputation: 306

if your button must be disabled if your form is not valid then use

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

or

 <button type="submit" [disabled]="ngForm.invalid">Submit</button>

Edited In your Html

 <div class="container">
    <h1>Hero Form</h1>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
              required
              [(ngModel)]="ngForm.name" name="name">
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text"  class="form-control" id="alterEgo"
              [(ngModel)]="ngForm" name="alterEgo" (ngModelChange)="changed($event)" > 
      </div>

      <div class="form-group">
      <input type="checkbox" name="theInsuredType" value="theChkAcceptTerms"  [(ngModel)]="ngForm.theChkAcceptTerms"  (ngModelChange)="changed($event, 'theChkAcceptTerms')" > theChkAcceptTerms<br>
      <input type="checkbox" name="theInsuredType" value="theInsuredType"   [(ngModel)]="ngForm.theInsuredType" (ngModelChange)="changed($event, 'theInsuredType')"> theInsuredType<br>
      <input type="checkbox" name="theInsuredType" value="theReportInjury"  [(ngModel)]="ngForm.theReportInjury" (ngModelChange)="changed($event, 'theReportInjury')" > theReportInjury<br>
      <input type="checkbox" name="theInsuredType" value="oneMoreCondition"  [(ngModel)]="ngForm.oneMoreCondition" (ngModelChange)="changed($event, 'oneMoreCondition')" > theReportInjury<br>

      </div>


    <button type="submit" [disabled]="!canSubmit">Submit</button>


</div>

Then In your component.ts file

  theChkAcceptTerms: boolean;
  theInsuredType: boolean;
  theReportInjury: boolean;
  oneMoreCondition: boolean;
  canSubmit: boolean;
  ngForm = {}

  changed(status: boolean, control: string ){

    switch(control) { 
        case 'theChkAcceptTerms': { 
           this.theChkAcceptTerms = status
            break; 
        } 
        case 'theInsuredType': { 
            this.theChkAcceptTerms = status
            break; 
        } 
        case 'theReportInjury': { 
            this.theReportInjury = status
            break; 
        } 
        case 'oneMoreCondition': { 
           this.oneMoreCondition = status
            break; 
        } 
        default: { 
            break; 
        } 
    }
    if(this.theChkAcceptTerms &&  this.theChkAcceptTerms  &&   this.theReportInjury &&  this.oneMoreCondition){
      this.canSubmit = true;
    }else{
      this.canSubmit = false;
    }


  }

Upvotes: 0

Saksham
Saksham

Reputation: 9390

You need to get the two way data binding for your controls and check them in the disabled attribute as

[disabled]="!checkBox || !radioGroup1 || !radioGroup2"

Check out the sample I created HERE

Upvotes: 5

Md. Mustafizur Rahman
Md. Mustafizur Rahman

Reputation: 809

if theChkAcceptTerms is a boolean variable then try with 

<button [disabled]="!theChkAcceptTerms || theInsuredType.invalid ||  theReportInjury.invalid">

Upvotes: 0

Related Questions