有没有办法在angular2中使用ngForm获取数组值答案

【问题标题】：Is there any way to get array value using ngForm in angular2有没有办法在angular2中使用ngForm获取数组值
【发布时间】：2016-08-22 20:40:26
【问题描述】：

比如我写了一个这样的组件。

@Component({
    selector: 'home',
    template:
        `
        <form (ngSubmit)="onSubmit(f)" #f="ngForm">
            <input type="text" ngControl="people">
            <input type="text" ngControl="people">
            <input type="submit">
        </form>
    `
})
export class Home {
    onSubmit(f) {
        console.log(f.value);
    }
}

当我为每个表单输入“tom”和“bob”并单击“提交”按钮时，控制台显示：

Object {people: "bob"}

而我的期望是：

Object {people: ["tom", "bob"]}

是否可以使用 ngForm 获取数组值？

【问题讨论】：

你为什么还要使用 2 个输入控件？您在这里有几个选项 - 1) 使用 1 个输入框并接受逗号分隔的值，然后使用 split 函数使其成为一个数组。无论您接受多少人，这都将起作用。 2）如果您只接受 2 个人而不是创建 2 个不同的名称，例如 person1 和 person2，那么创建一个像这样的数组 - people = [person1,person2];。你怎么看？
我的产品中人数不同。在我的情况下，您的第一个解决方案可能效果很好。感谢您的建议。
太好了！我会将其添加为答案，以便其他人受益。好吗？
我找到了一个满足我要求的好方法。见below。

标签： typescript angular angular2-forms

【解决方案1】：

这是一个使用ControlArray满足我要求的示例。

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, Control, FORM_PROVIDERS, FormBuilder} from 'angular2/common';

@Component({
        selector: 'home',
        template:
            `
            <form [ngFormModel]="sampleForm" (ngSubmit)="onSubmit(sampleForm)">
                <div ngControlGroup="people">
                    <div *ngFor="let item of sampleForm.controls.people.controls; let i = index">
                        <input type="text" ngControl='{{ i }}'>
                        <button (click)="delPerson(i)">Del</button>
                    </div>
                </div>
                <button (click)="addPerson($event)">Add</button>
                <input type="submit">
            </form>
        `,
        providers: [FORM_PROVIDERS]
    })
export class Home {

    sampleForm: any;

    constructor(private builder: FormBuilder) {
        this.sampleForm = this.builder.group({
            people: this.builder.array([new Control()])
        });
    }

    addPerson(event) {
        event.preventDefault();
        this.sampleForm.controls.people.push(new Control());
    }

    delPerson(i: number) {
        this.sampleForm.controls.people.removeAt(i);
    }

    onSubmit(f) {
        console.log(f.value);
    }
}

这对我来说效果很好，但我认为这部分 (let item of sampleForm.controls.people.controls) 并不漂亮，我不知道这是 ngForm 的一个好用法。

【讨论】：

其实是用旧的api。您应该尝试在最新的 Angular4 中使用响应式表单。

【解决方案2】：

我会为您的人员创建ngModel / 控制兼容子组件：

const PEOPLE_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PeopleComponent), multi: true});

@Component({
  selector: 'people',
  template: `
    <div>
      Person 1 : <input [(ngModel)]="person1" (ngModelChange)="doOnChange()"/><br/>
      Person 2 : <input [(ngModel)]="person2" (ngModelChange)="doOnChange()"/>
    <div>
  `,
  providers: [ PEOPLE_VALUE_ACCESSOR ]
})
export class PeopleComponent implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value:any):void {
    if (value!=null) {
      this.person1 = value[0];
      this.person2 = value[1];
    }
  }

  doOnChange(elt) {
    this.onChange([ this.person1, this.person2 ]);
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

你可以这样使用它：

<form>
  <div>
    <people #people="ngForm" ngControl="people"></people>
    people : {{people.value}}
  </div>
</form>

在关联控件（此处为people.value）中，您将拥有一个数组。

看到这个 plunkr：https://plnkr.co/edit/ix8unZ58hvqojjAic0E3?p=preview。

【讨论】：