따라서 엔터티를 만들기위한 복잡한 양식이 있고이를 편집에도 사용하고 싶습니다. 새로운 각도 양식 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]" />
작동하지만 어레이의 경우 고통이 될 것입니다.
답변
모든 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를 사용하여 기능을 추가 / 편집하기 위해 반응 형 양식을 사용하는 방법을 이해할 수 있습니다 . 그것은 내 시간을 절약했습니다
답변
form.get을 사용하여 특정 제어 객체를 가져오고 setValue를 사용할 수 있습니다.
this.form.get(<formControlName>).setValue(<newValue>);
답변
의견에서 지적했듯이이 기능은이 질문을 받았을 당시 지원되지 않았습니다. 이 문제는 angular 2 rc5에서 해결되었습니다.
답변
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);
}
용법:
this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});
참고 : 양식과 데이터는 동일한 구조를 가져야하며 jQuery를 딥 클로닝하는 데 lodash를 사용했으며 다른 lib도 할 수 있습니다.
답변
“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;
