CODEWITHSUNDEEP
htmlangular
user2004
user2004

Reputation: 1973

disabled button if checkbox is unchecked

I have an Angular component with a checkbox and a button that should be disabled if the checkbox is unchecked. What is the correct way for this?

<div class="form-check my-5">
  <input type="checkbox" class="form-check-input id="agreements">
  <label class="form-check-label" for="agreements">I have signed the agreements</label>
</div>

<button type="button" class="btn btn-outline-danger">Continue</button>

Upvotes: 5

Views: 2307

Answers (5)

Hardik Shimpi
Hardik Shimpi

Reputation: 410

Use [disabled] attribute with one flag for it.

component.html

<div class="form-check my-5">
  <input type="checkbox" class="form-check-input" [(ngModel)]="isDisabled" id="remember-me" name="rememberMe">
  <label class="form-check-label"  for="remember-me">I have signed the agreements</label>
</div>

<button type="button" [disabled]="!isDisabled" class="btn btn-outline-danger">Continue</button>

component.ts

isDisabled: boolean = false;

This will solve your problem..

Upvotes: 3

aamd
aamd

Reputation: 427

Here is a sample working demo https://stackblitz.com/edit/angular-fz73re

Upvotes: 1

ic_paty
ic_paty

Reputation: 432

You can use [disabled] attribute to enable/disable submit button:

TS file:

export class AppComponent  {
  isDisabled: boolean = true;
  updateStatus($event){
   $event.target.checked === true ?  this.isDisabled = false: this.isDisabled = true;
  }
}

HTML file

<div>
  <input type="checkbox"  id="remember-me"(change)="updateStatus($event)">
  <label for="remember-me" >I have signed the agreements</label>
</div>
<button  [disabled]="isDisabled" type="button">Continue</button>

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

I think having a Reactive Form in place with required validators would give you more control over the form implementation.

You could create a Reactive Form that looks something like this:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  form: FormGroup = this.fb.group({
    agreement: [null, Validators.required]
  });

  constructor(private fb: FormBuilder) {}
}

And then you could use the [disabled] property binding syntax and bind it to form.invalid property to disable the button when the form is invalid:

<form [formGroup]="form">
  <div class="form-check my-5">
    <input 
      type="checkbox" 
      class="form-check-input" 
      id="agreements">
    <label 
      class="form-check-label" 
      for="agreements">
      I have signed the agreements
    </label>
  </div>

  <button 
    type="button" 
    class="btn btn-outline-danger"
    [disabled]="form.invalid">
    Continue
  </button>
</form>

Here's a Sample Working Demo for your ref.

Upvotes: 4

Mohammad
Mohammad

Reputation: 1577

use ng-disabled property :

<!DOCTYPE html>  
    <html ng-app>  
      
        <head>  
            <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>  
        </head>  
      
        <body>      <input type="checkbox" class="form-check-input id="agreements" ng-model="checked">
  <label class="form-check-label" for="agreements">I have signed the agreements</label>
</div>

<button type="button" class="btn btn-outline-danger" ng-model="button" ng-disabled="checked">Continue</button> </body>  
      
    </html>

Upvotes: 1

Related Questions