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?

Angular Reactive Form Automatic Group Validation According to Controls

1 Answers