FormGroup için Angular2 set değeri

Bu yüzden bir varlık oluşturmak için karmaşık bir formum var ve bunu düzenleme için de kullanmak istiyorum, yeni açısal formlar API'si kullanıyorum. Formu tam olarak veritabanından aldığım veriler gibi yapılandırdım, bu nedenle tüm formun değerini burada alınan verilere ayarlamak istiyorum, yapmak istediğim şeye bir örnek:

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

Not: NgModel, yeni formlar api ile çalışmaz, ayrıca şablonda olduğu gibi tek yönlü veri bağlamayı kullanmayı da umursamıyorum

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

bu işe yarıyor ancak diziler söz konusu olduğunda bir acı olurdu

Tüm FormGroup değerlerini ayarlamak için şunu kullanın, setValue :

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

Yalnızca bazı değerleri ayarlamak için patchValue kullanın :

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

Bu ikinci teknikle, tüm değerlerin sağlanması gerekmez ve değerleri ayarlanmayan alanlar etkilenmeyecektir.

Kontrolünüz FormGroup olduğunda set değeri için bu örneği kullanabilirsiniz

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

Evet, düzenleme / güncelleme amacıyla değer ayarlamak için setValue kullanabilirsiniz.

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

SetValue kullanarak ekleme / düzenleme özelliği için Reaktif formların nasıl kullanılacağını anlamak için http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ adresine başvurabilirsiniz . Zamanımı kurtardı

Belirli bir kontrol nesnesini almak için form.get ve setValue kullanabilirsiniz

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

Yorumlarda belirtildiği gibi, bu özellik bu soru sorulduğunda desteklenmiyordu. Bu sorun açısal 2 rc5 ile çözülmüştür

Angular2 destek formu updateValue tarihine kadar geçici bir çözüm uyguladım

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

kullanım:

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

not: form ve veriler aynı yapıya sahip olmalı ve jQuery'yi derin klonlamak için lodash kullandım ve diğer kütüphaneler de yapabilir

"NgModel, yeni formlar api ile çalışmaz".

Bu doğru değil. Sadece doğru şekilde kullanman gerekiyor. Reaktif formları kullanıyorsanız, NgModel , reaktif direktif ile uyumlu olarak kullanılmalıdır . Kaynaktaki örneğe bakın .

/*
 * @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"
 *  }
 * }
 */

TODO yorumlarında göründüğü gibi , bu muhtemelen kaldırılacak ve reaktif bir API ile değiştirilecektir.

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