formGroup에 대한 Angular2 설정 값

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

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

이 두 번째 기법에서는 모든 값을 입력할 필요가 없으며 값이 설정되지 않은 필드는 영향을 받지 않습니다.

form.get을 사용하여 특정 컨트롤 개체를 가져오고 setValue를 사용할 수 있습니다.

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

컨트롤이 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
      }
    });

setValue를 사용하여 기능 추가/편집을 위해 반응형 양식을 사용하는 방법을 이해하려면 http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ 을 참조하십시오.덕분에 시간이 절약되었습니다.

코멘트에서 지적한 바와 같이 이 기능은 이 질문을 받았을 때 지원되지 않았습니다.이 문제는 각 2rc5에서 해결되었습니다.

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

참고: 양식과 데이터는 동일한 구조여야 하며 딥 클로닝을 위해 lodash를 사용했으며 jQuery와 다른 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;

언급URL : https://stackoverflow.com/questions/38655613/angular2-set-value-for-formgroup