Angular formGroup inside formArray, formGroup is invalid, but `formArray.valid` is true

Question

this is my primary code:

get emailFormArray() {
  return this.formGroup.get("emails") as FormArray;
}

public ngOnInit() {
  this.formGroup = this.formBuilder.group({
    emails: this.formBuilder.array([]),
  });
  this.addEmailFormGroup();
}

public addEmailFormGroup() {
  this.emailFormArray.controls.push(
    this.formBuilder.group({
      email: ['', Validators.email],
    }),
  );
}

and in my template

{{ formGroup.valid }}
{{ emailFormArray.valid }}
<ng-container *ngFor="let email of emailFormArray.controls">
  {{ email.valid }}
  {{ email.get('email').valid }}
</ng-container>

When I input a invalid email, the result in template is true true false false, why the formGroup and emailFormArray is valid? Thank you!

Answer 1

I found the reason. I should use this.emailFormArray.push instead of this.emailFormArray.controls.push