Angular, Disable submit button using [disabled] to check form validity
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>
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>