Button does not disable on change in Angular

Question

I have this button that will be disabled everytime that the form is invalid

<button [disabled]="createForm.invalid" type="submit" class="btn btn-primary pull-right button-spinner" tabindex="0" ><span>NEXT</span></button>

but it seems like the validation only effect everytime I blur on a form control instead on change.

I also added this on ngOnit and changed the [disabled]="isNextDisabled" but it seems that the state will change on change too

this.createForm.valueChanges
        .subscribe(formValue => {
                this.isNextDisabled = !this.createForm.valid;
            }
        );

The initialization of the form:

this.createForm = this.formBuilder.group({
            formText: ['', Validators.required],
            list: ['', Validators.required]
)};

Answer 1

<!-- disable the button -->
<button>
Disable Button
</button>

<!-- enable the button -->
<button>
Enable Button
</button>

<!-- the target button -->
<button disabled="disabled">
I've been clicked {{count}} times.
</button>



follow the link below for getting the detail:
https://blogs.msdn.microsoft.com/laurieatkinson/2016/09/12/using-data-binding-with-angular-2-to-disable-a-button/

Answer 2

I will try to resolve your issue with one example as I did. Follow this you can do.

test.html

<form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
          <ion-item color="border-text">
            <ion-input type="password" placeholder="Existing Password"
                       formControlName="existing_pass"></ion-input>
          </ion-item>
          <ion-item no-lines *ngIf="existingPass.invalid && existingPass.touched">
            <ion-label style="color:#F53D3D" no-margin stacked>Existing Password Required</ion-label>
          </ion-item>
         <div class="buttonClass">
         <button [disabled]="!isReadyToSave" ion-button round color="primary" block
                style="margin-top: 20px !important;">Save
         </button>
      </div>
    </form>

test.ts

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

changePasswordForm: FormGroup;
isReadyToSave: boolean = false;
constructor(formBuilder: FormBuilder,) {

 this.changePasswordForm = formBuilder.group({
    existing_pass: ['', Validators.required]

  });

 this.changePasswordForm.valueChanges.subscribe((v) => {
    this.isReadyToSave = this.chanegPasswordForm.valid;
  });
}

Answer 3

You can use two operations

<button [disabled]='createForm.invalid || isNextDisabled'>Submit</button>

And use what you have tried to disable when valueChanges

this.createForm.valueChanges.subscribe((v) => {
      this.isNextDisabled = !this.createForm.valid;
 });

Working Stackblitz

Answer 4

Actually you may not need to separately look for valueChanges. Here is a code

HTML

<form [formGroup]="createForm">
    <input formControlName='formText'>
    <input formControlName='list'>

    <button [disabled]="createForm.invalid"
 type="submit"
  class="btn btn-primary pull-right button-spinner"
   tabindex="0" >
   <span>NEXT</span>
   </button>
</form>

component.ts

import { Component, OnInit } from "@angular/core";
import {
  FormsModule,
  ReactiveFormsModule,
   FormGroup, FormBuilder, Validators
} from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  createForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createForm = this.formBuilder.group({
      formText: ["", Validators.required],
      list: ["", Validators.required]
    });
  }
}

Stackblitz DEMO

Answer 5

You can achieve this by checking your formGroup is valid or not with the attribute [disabled], check below for more clarification

TS:

// method which will create the FormGroup
private createMyForm() {
        this.myForm = new FormGroup({
            FormFiled1 : new FormControl('', [Validators.required, Validators.maxLength(200)]),
            FormFiled2 : new FormControl('', []),
            FormFiled3 : new FormControl('', [Validators.required])
        });
    }

[Validators.required] this will make the formfield required, as soon as you dont enter anything into the field the form will invalid hence you have to check form is valid or not by using below code

HTML:

// set [disabled] value as true or false to disable or enable the button 
<button type="submit" [disabled]="myForm.invalid" (click)="MyFunction()">Submit</button>

Demo

Answer 6

Yes, using onchange disables or enables when the focus is out from the input field.

For this you need to use ngModelChange, then it will enable/disable the button when you're in the input field.

This method is generally used for only a single input field like confirmation pop with input field for deleting, suspended etc

<mat-form-field appearance="outline">
      <mat-label>Please Confirm</mat-label>
      <input matInput name="value" [(ngModel)]='value' placeholder="Enter {{confirmValue}}" (ngModelChange)="onChange($event)"
        autocomplete="off">
    </mat-form-field>

<button mat-raised-button class="mat-accent mr-16" (click)="onSubmit()" [disabled]="confirmDisable">
    <mat-icon>done</mat-icon>Confirm
  </button>

TS

  confirmDisable: boolean = false;
  value!: string;

  onChange($event: any) {
    this.confirmDisable= this.value === this.confirmValue ? false : true;
  }
  
  onSubmit() {
    //now confirm, we can proceed further
  }