webentwicklung-frage-antwort-db.com.de

Angular2 Wert für FormGroup setzen

Ich habe also ein komplexes Formular zum Erstellen einer Entität, und ich möchte es zum Bearbeiten verwenden. Außerdem verwende ich die neue eckige Formular-API. Ich habe das Formular genau so strukturiert wie die Daten, die ich aus der Datenbank abrief. Ich möchte den Wert des gesamten Formulars auf die hier abgerufenen Daten setzen. Dies ist ein Beispiel dafür, was ich tun möchte: 

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 funktioniert nicht mit neuen Formularen. Außerdem macht es mir nichts aus, einseitige Datenbindung in der Vorlage wie in zu verwenden 

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

das funktioniert aber es wäre ein Schmerz im Falle der Arrays

38
Amgad Serry

Um alle FormGroup-Werte festzulegen, verwenden Sie setValue :

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

Verwenden Sie patchValue , um nur nur einige Werte einzustellen:

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

Bei dieser zweiten Methode müssen nicht alle Werte angegeben werden, und Felder, deren Werte nicht festgelegt wurden, werden nicht beeinflusst.

148
Stephen Paul

Als Set-Wert kann FormGroup dieses Beispiel verwenden, wenn Ihr Steuerelement festgelegt ist

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

Wie bereits erwähnt, wurde diese Funktion zum Zeitpunkt der Frage nicht unterstützt. Dieses Problem wurde in Winkel 2 rc5 gelöst 

3
Amgad Serry

Ja, Sie können setValue verwenden, um einen Wert zum Bearbeiten/Aktualisieren festzulegen.

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

Sie können unter http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ - nachlesen, wie Sie mit setValue reaktive Formulare für die Funktion zum Hinzufügen/Bearbeiten verwenden . Es hat mir Zeit gespart

2

Ich habe eine temporäre Lösung implementiert, bis das Update2-Modell von angle2 unterstützt wird

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

verwendungszweck:

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

hinweis: form und daten müssen dieselbe struktur haben und ich habe lodash für das deepcloning von jQuery und anderen libs verwendet 

2
Amgad Serry

"NgModel funktioniert nicht mit neuen Formularen.".

Das ist nicht wahr. Sie müssen es nur richtig verwenden. Wenn Sie reaktive Formulare verwenden, sollte das NgModel zusammen mit die reaktive Direktive verwendet werden. Siehe das Beispiel in der Quelle

/*
 * @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"
 *  }
 * }
 */

Obwohl es aus den TODO-Kommentaren aussieht, wird es wahrscheinlich entfernt und durch eine reaktive API ersetzt.

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