angular - Contextual Information When Using an Angular Form Array

Question

I am working with an array in Reactive Forms and am trying to display some contextual information alongside the form controls. For example, a customer may have many addresses and I can quite easily display this array, but I would like to also display the address type, which is text and not a form control.

For example, I have the following data model:

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

Which I then use to build a an array inside of a form group

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

The HTML to display this is

<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>

In this example how would I pass in the address name so that I can use it in the form?

标签： angularangular-reactive-forms

Answer 1

您的 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')})
  ])
});

但是，这是硬编码的，所以改为使用 yourbackingModel来生成：

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