如何将 FormArray 与 Angular 反应式 forms 的 FormGroups 一起使用？

Question

我试图以我的反应形式模仿我的 model。 我已经设置了一些 FormGroups 来“嵌套”根据我的 model 有意义的东西。我在设置我的组件以读取值时遇到了问题——这表明我可能没有正确设置我的模板任何一个。

取决于我是在编辑现有位置还是创建新位置，

@Input() location: ILocation;

可能是undefined的。 目前我只专注于使用现有位置，所以我知道location是有价值的。

// location.model.ts

name: string;
...
messaging: [
    {
        email: {
            fromName: string;
            fromAddress: string;
        };
    }
];
...
createdAt?: string;
updatedAt?: string;
deletedAt?: string;

在我的模板中，我使用ngClass为用户提供验证反馈：

// location.commponent.html

<div formGroupName="messaging">
    <div formGroupName="email">
        ...
        <div [ngClass]="form.get(['messaging', 'email', 'fromName'])!.errors && (form.get(['messaging', 'email', 'fromName'])!.dirty || form.get(['messaging', 'email', 'fromName'])!.touched) ? 'red' : 'green'">
            <input name="fromName"/>
        </div>
        <!-- fromAddress -->
    </div>
</div>

在我的组件中，我通过输入绑定传递 model，然后设置我的表单组和表单字段，如下所示：

// location.component.ts

@Input() location: ILocation; 

form: FormGroup;

...

ngOnInit(): void {
    this.form = new FormGroup({name: new FormControl(this.location.name, [Validators.required]),
    messaging: new FormGroup({
    email: new FormGroup({
        fromName: new FormControl(this.location.messaging[0].email.fromName, [Validators.required]),
        fromAddress: new FormControl(this.location.messaging[0].email.fromAddress, [Validators.required]),
        }),
    }),
}

我看到的错误是：

无法读取未定义的属性（读取“电子邮件”）

如果我注销组件中的内容：

console.log('messaging: ', this.location.messaging);

// email: {fromName: 'No Reply <noreply@example.com>', fromAddress: 'noreply@example.com'}

我尝试了各种messaging['email']或messaging.email messaging[0]方法，但我似乎找不到正确的路径。

我也不确定我是否在我的模板中正确使用了get()方法。

如何设置我的表单以正确读取/显示数据？

更新：

毫不奇怪，我遇到的一个大问题是发回错误形状的数据。

最后，这是我要创建的 JSON：

[{"email":{"fromName":"No Reply <noreply@example.com>","fromAddress":"noreply@example.com"}}]

看起来我需要使用FormArray来发送正确的形状：

messaging: new FormArray([
    new FormGroup({
        email: new FormGroup({
            fromName: new FormControl(this.location.messaging[0].email.fromName, [Validators.required]),
            fromAddress: new FormControl(this.location.messaging[0].email.fromAddress, [Validators.required]),
        }),
    }),
]),

这在我的模板中造成了一些麻烦，因为我目前正在这样做： form.get('messaging[0].email.fromAddress')

导致：

错误：找不到路径为“消息传递 -> 电子邮件”的控件

我想我需要以某种方式循环遍历FormArray 。 不过，这确实不是动态数组。 我将始终拥有email并且只有fromName和fromAddress 。

Answer 1

是的，您需要FormArray ，因为messaging是一个数组。

您需要通过*ngFor迭代FormArray中的每个元素并提供索引（ i ）：

form.get(['messaging', i, 'email', 'fromName'])

从父 FormGroup 到fromName FormControl的模板表单的完整流程是：

表单 ( FormGroup ) --> 消息 ( FormArray ) --> i ( FormGroup ) --> email( FormGroup ) --> fromName( FormControl )

HTML 模板应该是：

<div [formGroup]="form">
  <div
    formArrayName="messaging"
    *ngFor="let control of messaging.controls; let i = index"
  >
    <ng-container [formGroupName]="i">
      <div formGroupName="email">
        ...
        <div
          [ngClass]="
            form.get(['messaging', i, 'email', 'fromName'])!.errors &&
            (form.get(['messaging', i, 'email', 'fromName'])!.dirty ||
              form.get(['messaging', i, 'email', 'fromName'])!.touched)
              ? 'red'
              : 'green'
          "
        >
          <input formControlName="fromName" />
        </div>
        <div>
          <!-- fromAddress -->
          <input formControlName="fromAddress" />
        </div>
      </div>
    </ng-container>
  </div>
</div>

get messaging(): FormArray {
  return this.form.get('messaging') as FormArray;
}

演示 @ StackBlitz