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?
When you click on checkbox .is(":checked") return true if it is checked other wise return false. According to selection of your checkbox button it will enable/disable button.
1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.
To disable a button when an input is empty with React, we can set the input's value as a state's value. Then we can use the state to conditionally disable the button when the state's value is empty. to create the name state with the useState hook.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With