Angular 2 - Wie werden Objektwerte automatisch an Formularsteuerelemente gebunden?

Question

Ich benutze model driven forms und ich bin auf der Suche nach einem besseren Weg, um die Daten an formControlName 's zu binden, weil ich mehr als 25 Felder auf meinem Formular habe und ich möchte nicht diesen Code für alle schreiben müssen Felder wie ich für unten geschrieben habe.

Vorlage:

<input type="text" 
     class="form-control" 
     formControlName="firstName" 
     name="firstName" 
     placeholder="First Name" 
     required> 

Komponente:

this.refferalService.getReferringDataEdit(id).subscribe(
    result => { 
    this.referringData = result.responseObject; 
    this.refferalForm.patchValue({ 
     firstName: this.referringData.firstName 
    }) 
    } 
) 

Gibt es eine Möglichkeit, es "automatisch" zu tun?

Answer 1

Sie können es tun dies wie:

import {FormGroup,FormBuilder,FormControl} from '@angular/forms'; 

export class formComponent{ 
    myForm : FromGroup 
    constructor(fb: FormBuilder){ 
    this.myForm= fb.group({ 
     'firstName' : [''], 
     'lastName' : [''], 
    }); 
} 
onSubmit(value:string){ 
    console.log(form); 
} 
} 

in Ihrem HTML Später verwenden Sie es mögen:

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> 
<input type="text" placeholder="FirstName" [formControl] = "myForm.controls['firstName']"> 

<input type="text" placeholder="LastName" [formControl] = "myForm.controls['lastName']"> 
<button type="submit">Submit</button> 
</form> 

und binden Sie es mit (ngSubmit). Wenn Sie also auf "Senden" klicken, wird der Wert in myForm.value angezeigt. myForm speichert das Formular als Schlüssel/Wert-Paare.

in der Konsole wird die Ausgabe sein:

Object : 
firstName:.... 
lastName: ... 

Sie können finden: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

EDIt:

In Ihrem: Da die Anforderung der Daten aus dem Dienst zu speichern war abonnieren Sie einfach wie folgt: this.refferalForm.setValue(this.referringData); setValue erwartet ein Objekt mit Schlüssel/Wert Paare

Answer 2

Ich kann zwei Möglichkeiten sehen, dies zu tun :

Erster Ansatz:

Sie könnten eine allgemeine Methode schaffen für beide „Formen“ (neu/bearbeiten), und erstellen Sie das Formular mit oder ohne die Werte, auf diese Weise:

ngOnInit() { 
    // Imagine that the data is coming from API: 
    const referringData = { firstName: 'First', lastName: 'Last' }; 
    this.initForm(referringData); 
} 

private initForm(data = {}): void { 
    // Note that you can pass nothing to this function, 
    // so the values will be initially undefined (no problem with that) 

    this.myForm = this.formBuilder.group({ 
    firstName: [data.firstName, [Validators.required]], 
    lastName: [data.lastName, [Validators.required]] 
    }); 
} 

DEMO

Zweiter Ansatz:

In diesem Ansatz können Sie es automatisch mit [(ngModel)] binden, so dass Sie nichts in Ihrer Komponentendatei tun müssen.

ngOnInit() { 
    // Imagine that the data is coming from API: 
    this.referringData = { firstName: 'First', lastName: 'Last'}; 

    // init the form as always 
} 

Und in Vorlage Verwendung [(ngModel)] zu binden die Werte:

<input type="text" formControlName="firstName" [(ngModel)]="referringData.firstName"> 

<input type="text" formControlName="lastName" [(ngModel)]="referringData.lastName"> 

DEMO

über die vollständigen Quellen für beide Ansätze prüfen.

Hinweis:

Obwohl es überall etwas zu sagen, dass Sie nicht beide FormsModule mit ReactiveFormsModule verwenden können, würde ich damit nicht gehen, ich würde es vorziehen, den ersten Ansatz zu verwenden.