Angular 2 - 如何自动将对象值绑定到与Form控件相关的值？

Question

I'm using model driven forms and I'm searching a better way to bind the data to related to formControlName 's because I have more than 25 fields on my form and I don't want to have to write that code for all fields as I have written for below.

Template:

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

Component :

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

Is there a way to do it "automatically"?

Answer 1

You can do it Like this :

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

Later in your HTML use it like :

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

and bind it with (ngSubmit) . So whenever you hit the submit , the value will be reflected in myForm.value . myForm will store the form as key/value pairs.

In the console , your output will be :

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

You can Refer to : http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

EDIt: Since the requirement was to save the data from the service:

In your subscribe just do like this : this.refferalForm.setValue(this.referringData); setValue expects an object with key/value Pairs

Answer 2

I can see two ways to do this:

First approach:

You could create a general method for both "forms" (new/edit) and create the form with or without the values, this way:

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

Second approach:

In this approach you can bind it automatically with [(ngModel)] , so you don't need to do nothing in your component file.

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

  // init the form as always
}

And in template use [(ngModel)] to bind the values :

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

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

DEMO

Check the full sources for both approaches above.

Note:

Although there's nothing anywhere saying that you can't use both FormsModule with ReactiveFormsModule , I'd not go with this, I'd prefer to use the first approach.

Answer 3

To bind dynamic value or replacing value of fromControl, we can use patchValue method.

HTML Code :

 <mat-form-field appearance="outline">
                <mat-label>Email</mat-label>
                <input matInput formControlName="email"  >
                <mat-icon matSuffix class="secondary- 
                text">mail</mat-icon>

 </mat-form-field>    

Component Code :

ngOnInit () {
/** This create form group */
 this.resetPasswordForm = 
    this._formBuilder.group({
        email:new FormControl({ value: '', disabled:true }),
    });
    this.updateEmail()
}

updateEmail(){
    /** Update value of formControl */
     this.resetPasswordForm.patchValue({
            email: 'any@any.com'
 });
}