Angular2 menetapkan nilai untuk formGroup

Jadi saya memiliki formulir kompleks untuk membuat entitas dan saya ingin menggunakannya untuk mengedit juga saya menggunakan API bentuk sudut baru. Saya menyusun formulir persis seperti data yang saya ambil dari database jadi saya ingin mengatur nilai seluruh formulir ke data yang diambil di sini adalah contoh untuk apa yang ingin saya lakukan:

this.form = builder.group({
      b : [ "", Validators.required ],
      c : [ "", Validators.required ],
      d : [ "" ],
      e : [ [] ],
      f : [ "" ]
    });
this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

PS: NgModel tidak bekerja dengan api bentuk baru juga saya tidak keberatan menggunakan data satu cara mengikat di template seperti pada

<input formControlName="d" value="[data.d]" />

yang berfungsi tetapi akan merepotkan dalam kasus array

Untuk mengatur semua nilai FormGroup gunakan, setValue :

this.myFormGroup.setValue({
  formControlName1: myValue1, 
  formControlName2: myValue2
});

Untuk menyetel hanya beberapa nilai, gunakan patchValue :

this.myFormGroup.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)
});

Dengan teknik kedua ini, tidak semua nilai perlu diberikan dan kolom yang nilainya tidak disetel tidak akan terpengaruh.

Untuk mengatur nilai ketika kontrol Anda adalah FormGroup dapat menggunakan contoh ini

this.clientForm.controls['location'].setValue({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
    });

Ya, Anda dapat menggunakan setValue untuk menyetel nilai untuk tujuan edit / perbarui.

this.personalform.setValue({
      name: items.name,
      address: {
        city: items.address.city,
        country: items.address.country
      }
    });

Anda dapat merujuk http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ untuk memahami cara menggunakan formulir Reaktif untuk menambahkan / mengedit fitur dengan menggunakan setValue. Ini menghemat waktu saya

Anda bisa menggunakan form.get untuk mendapatkan objek kontrol spesifik dan menggunakan setValue

this.form.get(<formControlName>).setValue(<newValue>);

Seperti yang ditunjukkan dalam komentar, fitur ini tidak didukung pada saat pertanyaan ini diajukan. Masalah ini telah diatasi di angular 2 rc5

Saya telah menerapkan solusi sementara sampai bentuk dukungan angular2 updateValue

 initFormGroup(form: FormGroup, data: any) {
        for(var key in form.controls) {
          console.log(key);
          if(form.controls[key] instanceof FormControl) {
            if(data[key]){
              let control = <FormControl>form.controls[key];
              this.initFormControl(control,data[key]);
            }
          } else if(form.controls[key] instanceof FormGroup) {
            if(data[key]){
              this.initFormGroup(<FormGroup>form.controls[key],data[key]);
            }
          } else if(form.controls[key] instanceof FormArray) {
            var control = <FormArray>form.controls[key];
            if(data[key])
            this.initFormArray(control, data[key]);
          }
        }
      }
      initFormArray(array: FormArray, data: Array<any>){
    if(data.length>0){
      var clone = array.controls[0];
      array.removeAt(0);
      for(var idx in data) {
        array.push(_.cloneDeep(clone));
        if(clone instanceof FormGroup)
          this.initFormGroup(<FormGroup>array.controls[idx], data[idx]);
        else if(clone instanceof FormControl)
          this.initFormControl(<FormControl>array.controls[idx], data[idx]);
        else if(clone instanceof FormArray)
          this.initFormArray(<FormArray>array.controls[idx], data[idx]);
      }
    }
  }


initFormControl(control: FormControl, value:any){
    control.updateValue(value);
  }

pemakaian:

this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

catatan: formulir dan data harus memiliki struktur yang sama dan saya telah menggunakan lodash untuk deepcloning jQuery dan libs lain juga dapat melakukannya

"NgModel tidak bekerja dengan api bentuk baru".

Itu tidak benar. Anda hanya perlu menggunakannya dengan benar. Jika Anda menggunakan formulir reaktif, NgModel harus digunakan sesuai dengan petunjuk reaktif. Lihat contoh di sumber .

/*
 * @Component({
 *      selector: "login-comp",
 *      directives: [REACTIVE_FORM_DIRECTIVES],
 *      template: `
 *        <form [formGroup]="myForm" (submit)='onLogIn()'>
 *          Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
 *          Password <input type='password' formControlName='password'
 *                          [(ngModel)]="credentials.password">
 *          <button type='submit'>Log in!</button>
 *        </form>
 *      `})
 * class LoginComp {
 *  credentials: {login:string, password:string};
 *  myForm = new FormGroup({
 *    login: new Control(this.credentials.login),
 *    password: new Control(this.credentials.password)
 *  });
 *
 *  onLogIn(): void {
 *    // this.credentials.login === "some login"
 *    // this.credentials.password === "some password"
 *  }
 * }
 */

Meskipun sepertinya dari komentar TODO , ini mungkin akan dihapus dan diganti dengan API reaktif.

// TODO(kara):  Replace ngModel with reactive API
@Input('ngModel') model: any;