使用 Angular 表单数组时的上下文信息

Question

我在 Reactive Forms 中使用数组，并试图在表单控件旁边显示一些上下文信息。例如，一个客户可能有很多地址，我可以很容易地显示这个数组，但我还想显示地址类型，它是文本而不是表单控件。

例如，我有以下数据模型：

const backingModel = {
  addresses: [
    {
      name: 'Home',
      zipCode: '76106'
    },
    {
      name: 'Billing',
      zipCode: '09210'
    },
    {
      name: 'Shipping',
      zipCode: '90210'
    }
  ]
};

然后我用它在表单组中构建一个数组

this.formGroup = this.fb.group({
  addresses: this.fb.array([
    this.fb.group({
      zipCode: [backingModel.addresses[0].zipCode, Validators.required]
    }),
    this.fb.group({
      zipCode: [backingModel.addresses[1].zipCode, Validators.required],
    }),
    this.fb.group({
      zipCode: [backingModel.addresses[2].zipCode, Validators.required]
    })
  ])
});

显示这个的HTML是

<form [formGroup]="formGroup">
  <div formArrayName="addresses" *ngFor="let item of formGroup.get('addresses').controls; let i = index">
    <div [formGroupName]="i">
      <h3>???? How to get adress description </h3>
      <input type="text" formControlName="zipCode" />
      <hr />
    </div>
  </div>
</form>

在此示例中，我将如何传入地址名称以便我可以在表单中使用它？

Answer 1

将它添加到您的后备模型中然后只显示它？

{{backingModel.addresses[index].description}}

Answer 2

您的 HTML 应如下所示：

<form [formGroup]="formGroup">
    <div formArrayName="addresses" >
      <div *ngFor="let item of backingModel.addresses; let i = index" [formGroupName]="i">
        <h3>{{ item.name }}</h3>
        <input type="text" formControlName="zipCode" />
        <hr />
      </div>
    </div>
</form>

请注意，我正在迭代模型，而不是表单控件。

在您的 component.ts 文件中，您需要将 formGroup 设置为如下所示：

this.formGroup = fb.group({
  "addresses": fb.array([
    fb.group({ "zipCode": fb.control('Home')}),
    fb.group({ "zipCode": fb.control('Billing')}),
    fb.group({ "zipCode": fb.control('Shipping')})
  ])
});

但是，这是硬编码的，因此，请使用您的 backingModel 来生成：

this.formGroup = fb.group({
  "addresses": fb.array(
    this.backingModel.addresses.map(t => 
      fb.group({ "zipCode": [t.zipCode, Validators.required] })
    ))
  });
}

这是最后的component.ts：

import { Component } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'cmp',
  templateUrl: './cmp.component.html',
  styleUrls: ['./cmp.component.css']
})
export class CmpComponent {
  formGroup: FormGroup;
  backingModel: any = {
    addresses: [
      {
        name: 'Home',
        zipCode: '76106'
      },
      {
        name: 'Billing',
        zipCode: '09210'
      },
      {
        name: 'Shipping',
        zipCode: '90210'
      }
    ]
  };
  constructor(private fb: FormBuilder) {

    this.formGroup = fb.group({
      "addresses": fb.array(
        this.backingModel.addresses.map(t => 
          fb.group({ "zipCode": [t.zipCode, Validators.required] })
        ))
      });
    }
 }

使用 Angular 表单数组时的上下文信息

Contextual Information When Using an Angular Form Array

angular

angular-reactive-forms