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-12 15:02:52Z

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, 2019 at 15:02

answered Jan 31, 2018 at 2:03

moohkooh

9172 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wira Xie Over a year ago

property valid doesn't exist on type ()=> void

moohkooh Over a year ago

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 stackblitz.com ?

Abdul-Razak Adam · Accepted Answer · 2018-01-31 02:00:54Z

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, 2018 at 2:00

Abdul-Razak Adam

1,13812 silver badges19 bronze badges

3 Comments

Wira Xie Over a year ago

so we dont need to check one by one?

moohkooh Over a year ago

no, why you would like to check one by one? FormGroup will check for you one by one :)

Abdul-Razak Adam Over a year ago

moohkooh is right, form01 contains all the controls and form01 is invalid if any of its controls are invalid.

Michel_T. · Accepted Answer · 2022-08-31 00:51:41Z

1

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

edited Aug 31, 2022 at 0:51

Michel_T.

2,8215 gold badges24 silver badges32 bronze badges

answered Aug 25, 2022 at 11:10

user19502117

111 bronze badge

Comments

Nilesh Sutar · Accepted Answer · 2019-01-18 09:15:24Z

-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, 2019 at 9:15

Nilesh Sutar

1457 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related