Gibt es eine Möglichkeit, Array-Wert mit ngForm in angular2

Question

zu erhalten Zum Beispiel habe ich eine Komponente wie folgt geschrieben.

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

Wenn ich Eingang "tom" und "bob" für jede Form und klicken Sie auf "Senden", Konsole sagt:

Object {people: "bob"} 

Während meine Erwartung ist:

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

Ist Es ist möglich, Array-Wert mit ngForm zu erhalten?

Answer 1

Dies ist ein Beispiel, das meine Anforderung mit ControlArray erfüllt.

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

Dies funktioniert gut für mich, aber ich denke, das ist Teil (let item of sampleForm.controls.people.controls) nicht schön ist und ich weiß nicht, das ist eine gute Nutzung von ngForm ist.

Answer 2

I ngModel/Steuer konforme Sub-Komponente für Ihre Mitarbeiter schaffen würde:

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

Sie können es auf diese Weise verwenden:

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

innerhalb der zugehörigen Steuerung (people.value hier), müssen Sie eine Anordnung.

Siehe diese Plunkr: https://plnkr.co/edit/ix8unZ58hvqojjAic0E3?p=preview.