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?

Answer 1

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>