formArray 内的 Angular formGroup，formGroup 无效，但 `formArray.valid` 为真答案

【问题标题】：Angular formGroup inside formArray, formGroup is invalid, but `formArray.valid` is trueformArray 内的 Angular formGroup，formGroup 无效，但 `formArray.valid` 为真
【发布时间】：2021-07-29 13:12:34
【问题描述】：

这是我的主要代码：

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

在我的模板中

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

当我输入一个无效的电子邮件时，模板中的结果是true true false false，为什么formGroup和emailFormArray是有效的？谢谢！

【问题讨论】：

离题 - 您可以在 public ngOnInit 中省略 public
是的，谢谢，但我更喜欢这种代码风格

标签： angular angular-forms angular-formbuilder

【解决方案1】：

我找到了原因。我应该使用this.emailFormArray.push 而不是this.emailFormArray.controls.push

【讨论】：

即使我正要发布相同的答案:)

【解决方案2】：

我在从数据库加载数据和更新数据时遇到了同样的问题，它没有保持验证规则。我将直接值设置为表单控件的问题

loadSlideItemFromDB(slideShowItem): FormArray {
    const formArray = new FormArray([]);
    slideShowItem.forEach(item => {
      formArray.push(this.fb.group({
        id: item.Id,
        slideShowId: item.SlideShowId,
        pageType: item.PageType,
        linkUrl: item.LinkUrl,
        pageTitle: item.PageTitle
      }))
    });

    return formArray;
  }

重构代码后，我先创建带有验证规则的表单数组，然后为它创建patchValue。

我为关心的人分享这个。

loadSlideItemFromDB(slideShowItem): FormArray {
    const formArray = new FormArray([]);
    slideShowItem.forEach(item => {
      let group = this.fb.group({
        id: [''],
        slideShowId: [''],      
        pageType: ['1', Validators.required],
        linkUrl: ['', Validators.required],
        pageTitle: ['']
      })
      group.patchValue({
        id: item.Id,
        slideShowId: item.SlideShowId,
        pageType: item.PageType,
        linkUrl: item.LinkUrl,
        pageTitle: item.PageTitle
      });
      formArray.push(group);
    });

    return formArray;
  }

【讨论】：