I want to make the submit button disabled when the initial form is empty, if any value is not empty I need to enable submit button its possible?
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-row">
<div class="form-group col">
<label>Title</label>
<select formControlName="title" class="form-control" >
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div class="form-group col-5">
<label>First Name</label>
<input type="text" formControlName="firstName" class="form-control" />
</div>
<div class="form-group col-5">
<label>Last Name</label>
<input type="text" formControlName="lastName" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label>Date of Birth</label>
<input type="date" formControlName="dob" class="form-control" />
</div>
<div class="form-group col">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" />
</div>
</div>
<div class="text-center">
<button class="btn btn-primary mr-1">Register</button>
</div>
</form>
form ts file
ngOnInit() {
this.registerForm = this.formBuilder.group({
title: [''],
firstName: [''],
lastName: [''],
dob: [''],
});
}
in .ts file
//Add property
public isButtonDisabled: boolean;
public formValueChangeSubscription :Subscription;
// Add in ngOnInit
this.formValueChangeSubscription = this.registerForm.valueChanges.subscribe(() => {
this.isButtonDisabled = Object.keys(this.registerForm.controls).some(formKey => this.registerForm.controls[formKey].value);
})
// Add in ngOnDestroy - make sure you unsubscribe to prevent memory leaks!
this.formValueChangeSubscription.unsubscribe();
in .html file
<button [disabled]="isButtonDisabled" class="btn btn-primary mr-1">Register</button>
We can add a validation on reactive form itself. there is a cross-validation to reactive forms
To add a validator to the FormGroup, pass the new validator in as the second argument on creation.
this.registerForm = this.formBuilder.group({
title: [''],
firstName: [''],
lastName: [''],
dob: [''],
}, { validators: exampleValidator});
Validator function will be like this:
export const exampleValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const title = control.get('title');
const firstName = control.get('firstName');
const lastName = control.get('lastName');
const dob = control.get('dob');
return (title?.value || firstName?.value || lastName?.value || dob?.value) ? null : { inValid: true};
};
and you can disable/enable the submit button by using the reactive form valid 'form.valid'
<div class="text-center">
<button [disabled]="!registerForm?.valid"
class="btn btn-primary mr-1">Register</button>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.