web-dev-qa-db-ja.com

Angular2はformGroupの値を設定します

エンティティを作成するための複雑なフォームがあり、それを編集にも使用したいので、新しいangularフォーム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]" />

それは動作しますが、配列の場合は苦痛になります

angularangular2-forms
60
Amgad Serry

all FormGroup値を設定するには、setValueを使用します。

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

一部のみ値を設定するには、patchValueを使用します。

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

この2番目の手法では、すべての値を指定する必要はなく、値が設定されていないフィールドは影響を受けません。

198
Stephen Paul

コントロールがFormGroupであるときに値を設定するには、この例を使用できます

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

はい。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を使用します。それは私の時間を節約しました

3
Prashant M Bhavsar

コメントで指摘したように、この機能は、この質問が行われた時点ではサポートされていませんでした。この問題はangular 2 rc5で解決されました

3
Amgad Serry

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を使用しました。他のライブラリも同様に実行できます

2
Amgad Serry

「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;
0
Paul Samsotha