2016-07-14 10 views
1

Achtung: Es sollteAngular2 Neues Formular API: Formular ohne Bindungen ihrer Elemente

mit the new forms API! arbeiten Gibt es eine Möglichkeit, eine Rohform ohne Bindungen ihrer Elemente einreichen?

Ein Beispiel:

<div class="form-mantle"> 
    <form (ngSubmit)="onSubmitForm1(f1.value)" #f1="ngForm"> 
     <input ngControl="name1" name="name1" type="text" required/><br/> 
     <input ngControl="text1" name="text1" type="text" required/><br/> 
     <button class="btn btn-primary" [disabled]="!f1.form.valid">Next </button> 
    </form> 
</div> 

<pre> 
{{ form1 | json }} 
</pre> 

Wie sollte onSubmitForm1() aussehen, so dass ich form1 erhalten wie unten wiedergegeben:

{ 
    name1: "Michael Jackson", 
    text1: "They don't really care about us" 
} 

Ich habe preapared bereits eine Komponente + zu kopieren einfügen, für diejenigen, die helfen wollen:

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'form1', 
    templateUrl: 'form1.component.html', 
    styleUrls: ['form1.component.css'] 
}) 
export class Form1Component { 

    form1 : any = {}; 

    constructor() { } 

    onSubmitForm1 (data?:any) { 
     // get raw data from form without bindings 
     this.form1 = data; 
     console.log("Data", data); 
     return false; 
    } 
} 

Bearbeiten: T Die genaue Arbeitskopie in PLNKR (http://plnkr.co/edit/nMPTYLGxgWzzJuD9Be3f?p=preview) funktioniert nicht innerhalb des Seeds von https://github.com/mgechev/angular2-seed. Vielleicht ist es ein Versions-Problem ??

The delivered object is empty

Doppelbindungs ​​Arbeiten ohne Fehler:

<div class="form-mantle"> 
    <form (ngSubmit)="onSubmitForm1(f1.value)" #f1="ngForm"> 
     <input [(ngModel)]="f1.name1" #name="ngModel" name="name1" type="text" required/><br/> 
     <input [(ngModel)]="f1.text1" #name="ngModel" name="text1" type="text" required/><br/> 
     <button class="btn btn-primary" [disabled]="!f1.form.valid">Next </button> 
    </form> 
</div> 

<pre> 
{{ f1.value | json }} 
</pre> 

Antwort

2

Rufen Sie es wie so in Ihrem ngSubmit:

(ngSubmit)="onSubmitForm1(f1.value)" 

Zu jeder Kontrolle Sie die ngControl hinzufügen einreichen möchten Attribut, um seinen Namen festzulegen:

<input ngControl="name1" name="name1" type="text" required/><br/> 
<input ngControl="text1" name="text1" type="text" required/><br/> 

Dann in Ihrem onSubmitForm1:

onSubmitForm1 (data?:any) { 
    console.log("Data", data); 
    this.form1 = data; 
} 

Plunker zum Beispiel Nutzung

+0

Ich habe es versucht, jetzt und (f1.value) tut leider nichts:/ –

+1

Überprüfen Sie diesen Plunker: http://plnkr.co/edit/nMPTYLGxgWzzJuD9Be3f?p=preview – rinukkusu

+0

versuchen, ........ –

0

Yeap, denn jetzt (RC4) haben Sie nur zwei Möglichkeiten für eine Daten Annahme nach einreichen:

1) modellgetriebene Strategie (Bindungen)

2) Template-driven-Strategie (ngControls)

0

Finaly das Folgende (Doppelbindungen gearbeitet: /):

<form (ngSubmit)="onSubmitForm()" #s1="ngForm"> 
    <input [(ngModel)]="step1.name1" [ngModelOptions]="{standalone: true}" type="text" required/><br/> 
    <input [(ngModel)]="step1.text1" [ngModelOptions]="{standalone: true}" type="text" required/><br/> 
    <button class="btn btn-primary" [disabled]="!s1.form.valid">Next </button> 
</form>