CODEWITHSUNDEEP
angularangular-reactive-formsangular-forms
Sammy
Sammy

Reputation: 3687

Angular Reactive Form Automatic Group Validation According to Controls

I'm not sure if this is the intended behaviour; I have the following:

this.formGroup = this.fb.group({
  name: this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required]
  })
});
<div formGroupName="name">
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">
</div>

When I submit the form and console.log(this.formGroup), the errors object of the name AbstractControl is null. I expected it should have an Object with required: true. Where am I going wrong?

Upvotes: 3

Views: 143

Answers (1)

Sammy
Sammy

Reputation: 3687

Thanks to @yurzui for pointing out the related issue -- this is a workaround that will simply check for both controls:

import {AbstractControl} from '@angular/forms';

export const nameValidator = (control: AbstractControl): {[key: string]: boolean} => {
	const firstName = control.get('firstName');
	const lastName = control.get('lastName');
	if (!firstName || !lastName) {
		return null;
	}
	return firstName.value && lastName.value ? null : { required: true };
};

This needs to be explicitly included as a validator of course:

name: this.fb.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: nameValidator}),

Upvotes: 1

Related Questions