为 formGroup 设置 Angular2值

所以我有一个复杂的形式来创建一个实体，我想用它来编辑，以及我使用新的角形形式 API。我将表单的结构与我从数据库中检索到的数据完全一致，所以我想将整个表单的值设置为这里检索到的数据，这是我想要做的一个例子:

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

NgModel 不适用于新的表单 api，我也不介意在模板中使用单向数据绑定

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

但是对于数组来说就很麻烦了

246780 次浏览
小开

“ NgModel 不支持新的 api 表单”。

不是这样的。你只需要正确使用它。如果您使用的是反应形式，则 NgModel 应该使用 与... 一致反应指令。见 源代码中的例子。

/*
* @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 评论，这可能会被删除，并取而代之的是一个活性 API。

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

I have implemented a temporary solution until angular2 support form 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);
}

usage:

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

注意: 表单和数据必须有相同的结构，我已经使用 loash 深度克隆 jQuery 和其他库也可以这样做

小开

正如在评论中指出的那样，在提出这个问题时，这个特性并不受支持。这个问题在角度2 rc5中得到了解决

小开
最佳答案

若要使用 所有 FormGroup 值设置，请使用 SetValue:

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

若要设置 只有一部分值，请使用 PatchValue:

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

使用第二种技术，并不需要提供所有值，未设置值的字段不会受到影响。

小开

如果控件是 FormGroup，则可以使用此示例来设置值

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

是的，您可以使用 setValue 为编辑/更新设置值。

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

您可以参考 http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/，了解如何使用 setValue 使用 Reactive 表单来添加/编辑特性。节省了我的时间

小开

可以使用 form.get 获取特定的控件对象并使用 setValue

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

提交答案