Angular, Disable submit button using [disabled] to check form validity

Question

I'm trying to disable a submit button using [disable]=form.controls[...].invalid condition checking. The submit button should be disabled if there is an input fields is empty or invalid. But looks like i'm doing it wrong. The button is disabled when i fill some fields and left some fields empty, except for the first input field . When i filled the first input field, the button become enabled (while the other input fields are still empty or invalid).

//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
  dateFormat: 'dd-mmm-yyyy',
};

setDate(): void {
  let date = new Date();
  this.form01.patchValue({
    DoB: {
      date: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
      }
    }
  });
}

clearDate(): void {
  this.form01.patchValue({
    DoB: null
  });
}

constructor(public builder: FormBuilder) {
  this.form01 = this.builder.group({
    email: [null, Validators.required], //text
    DoB: [null, Validators.required], //radio button
    gender: [null, Validators.required], //date picker
  });
}

results: object = new Object();
functionForm01() {
  this.results = [{
    {
      "email": this.form01.controls.email.value
    },
    {
      "DoB": this.form01.controls.DoB.value
    },
    {
      "gender": this.form01.controls.gender.value
    }
  }]
  console.log(this.result);

  this.form01.reset();
}

<!--component.html-->
<div>
  <form [formGroup]="form01">
    email:<input type="text" name="email" formControlName="email" required/> gender:
    <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
    <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
    <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
  </form>
</div>

I'm using Angular typescript and myDatePicker package from this link. Can anyone help me please?

moohkooh · Accepted Answer · 2019-07-12T15:02:52.547

17

You can enable/disable the button by checking the validity of your form:

<button type="submit" [disabled]="!disableBtn">Click</button>

Inside your component:

let disableBtn = false;
this. form01.valueChanges 
            .subscribe((changedObj: any) => {
                 this.disableBtn = this. form01.valid;
            });

Or via HTML:

<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

edited Jul 12 '19 at 15:02

answered Jan 31 '18 at 02:03

moohkooh

917
1
10
25

property `valid` doesn't exist on type `()=> void` – Wira Xie Jan 31 '18 at 02:12
1

FormGroup has that property ?? I using the valid & dirty check to show a save bar and enable/disable the save/cancel button. can you provide a plunkr or https://stackblitz.com/ ? – moohkooh Jan 31 '18 at 02:14

score 15 · Answer 2 · answered Jan 31 '18 at 02:00

15

Since you have your formGroup object, you can disable the button if form01 is not valid

<!--component.html-->
    <div>
      <form [formGroup]="form01">
        email:<input type="text" name="email" formControlName="email" required/> gender:
        <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
        <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
        <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

      </form>
    </div>

answered Jan 31 '18 at 02:00

Abdul-Razak Adam

1,070
11
19

so we dont need to check one by one? – Wira Xie Jan 31 '18 at 02:02
no, why you would like to check one by one? FormGroup will check for you one by one :) – moohkooh Jan 31 '18 at 02:08
moohkooh is right, form01 contains all the controls and form01 is invalid if any of its controls are invalid. – Abdul-Razak Adam Jan 31 '18 at 02:20

score 1 · Answer 3 · edited Aug 31 '22 at 00:51

1

<button type="submit" [disabled]=" form01.controls['email' ].invalid || form01.controls['DoB' ].invalid || form01.controls['gender' ].invalid " (click)="functionForm01()">Click</button>

edited Aug 31 '22 at 00:51

Michel_T.

2,741
5
21
31

answered Aug 25 '22 at 11:10

user19502117

11
1

score -1 · Answer 4 · answered Jan 18 '19 at 09:15

-1

You need to import FormsModule inside the app.module.ts under imports import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
     FormsModule      
])}

answered Jan 18 '19 at 09:15

Nilesh Sutar

137
7

Angular, Disable submit button using [disabled] to check form validity

4 Answers4