Angular2 đặt giá trị cho formGroup

Vì vậy, tôi có một biểu mẫu phức tạp để tạo một thực thể và tôi muốn sử dụng nó để chỉnh sửa cũng như tôi đang sử dụng API biểu mẫu góc cạnh mới. Tôi đã cấu trúc biểu mẫu chính xác như dữ liệu tôi truy xuất từ ​​cơ sở dữ liệu, vì vậy tôi muốn đặt giá trị của toàn bộ biểu mẫu thành dữ liệu được truy xuất, đây là một ví dụ cho những gì tôi muốn làm:

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 không hoạt động với api biểu mẫu mới, tôi cũng không ngại sử dụng liên kết dữ liệu một chiều trong mẫu như trong

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

điều đó hoạt động nhưng sẽ rất khó khăn trong trường hợp các mảng

Để đặt tất cả các giá trị FormGroup sử dụng, setValue :

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

Để chỉ đặt một số giá trị, hãy sử dụng patchValue :

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

Với kỹ thuật thứ hai này, không phải tất cả các giá trị đều cần được cung cấp và các trường mà giá trị không được đặt sẽ không bị ảnh hưởng.

Để đặt giá trị khi kiểm soát của bạn là FormGroup, có thể sử dụng ví dụ này

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

Có, bạn có thể sử dụng setValue để đặt giá trị cho mục đích chỉnh sửa / cập nhật.

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

Bạn có thể tham khảo http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ để hiểu cách sử dụng Reactive form cho tính năng thêm / chỉnh sửa bằng setValue. Nó đã tiết kiệm thời gian của tôi

Bạn có thể sử dụng form.get để lấy đối tượng điều khiển cụ thể và sử dụng setValue

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

Như đã chỉ ra trong nhận xét, tính năng này không được hỗ trợ tại thời điểm câu hỏi này được hỏi. Sự cố này đã được giải quyết trong angle 2 rc5

Tôi đã triển khai một giải pháp tạm thời cho đến khi biểu mẫu hỗ trợ angle2 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);
  }

sử dụng:

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

lưu ý: biểu mẫu và dữ liệu phải có cùng cấu trúc và tôi đã sử dụng lodash để ép xung sâu jQuery và các lib khác cũng có thể làm được

"NgModel không hoạt động với api biểu mẫu mới".

Đo không phải sự thật. Bạn chỉ cần sử dụng nó một cách chính xác. Nếu bạn đang sử dụng các biểu mẫu phản ứng, NgModel nên được sử dụng cùng với chỉ thị phản ứng. Xem ví dụ trong nguồ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"
 *  }
 * }
 */

Mặc dù có vẻ giống từ các nhận xét CẦN LÀM , điều này có thể sẽ bị xóa và thay thế bằng một API phản ứng.

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