Angular 2 - Как автоматически привязать значения объектов к элементам управления формы?

Question

Я использую model driven forms, и я ищу лучший способ привязать данные к связанным с formControlName, потому что у меня есть более 25 полей в моей форме, и я не хочу писать этот код для всех поля, как я писал ниже.

Шаблон:

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

Компонент:

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

Есть ли способ сделать это "автоматически"?

Answer 1

Вы можете сделать это следующим образом:

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

Позже в вашем HTML использовать его как:

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

и связать его с (ngSubmit). Поэтому всякий раз, когда вы нажимаете submit, значение будет отражено в myForm.value. myForm сохранит форму как пары ключ/значение.

В консоли, ваш выход будет:

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

Вы можете обратиться к: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

РЕДАКТИРОВАТЬ: Поскольку требование было, чтобы сохранить данные из службы:

в вашем подписаться просто сделайте вот так: this.refferalForm.setValue(this.referringData); setValue ожидает объект с ключом/значением Пары

Answer 2

Я вижу два способа сделать это :

Первый подход:

Вы можете создать общий метод как «формы» (новые/редактирования) и создать форму с или без значения, таким образом:

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

Второй подход:

В этом подходе вы можете связать его автоматически с помощью [(ngModel)], поэтому вам не нужно ничего делать в вашем файле компонента.

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

    // init the form as always 
} 

И в использовании шаблон [(ngModel)] для связывания в значения:

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

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

DEMO

Проверьте полные источники обоих вышеуказанных подходов.

Примечание:

Хотя нет нигде ничего о том, что вы не можете использовать оба FormsModule с ReactiveFormsModule, я не пошел бы с этим, я бы предпочел, чтобы использовать первый подход.