Reactive Forms check form fields empty or default and disable button Angular

Question

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: [''],
        });
    }

Erez Shlomo · Accepted Answer · 2021-07-15 11:04:42Z

3

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>

edited Jul 15, 2021 at 11:04

answered Jul 15, 2021 at 10:43

Erez Shlomo

2,3223 gold badges17 silver badges37 bronze badges

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

1 Comment

sridharan Over a year ago

Object.keys(this.form.controls) is Object.keys(this.registerForm.controls) right

Vibin Thomas · Accepted Answer · 2021-07-15 11:08:57Z

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>

Collectives™ on Stack Overflow

Reactive Forms check form fields empty or default and disable button Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related