it-swarm.com.de

Legen Sie den Wert für FormBuilder Control manuell fest

Das macht mich verrückt, ich stehe unter der Waffe und kann es mir nicht leisten, noch einen ganzen Tag damit zu verbringen.

Ich versuche, manuell einen Steuerwert ('dept') in der Komponente festzulegen, und es funktioniert einfach nicht - selbst die neuen Wertsprotokolle werden ordnungsgemäß konsolidiert.

Hier ist die FormBuilder-Instanz:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

Dies ist der Event-Handler, der die ausgewählte Abteilung empfängt:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

Wenn nun das Formular gesendet wird und ich this.form auslogge, ist das Feld noch leer! Ich habe gesehen, dass andere ppl updateValue() verwenden, aber dies ist beta.1 und ich sehe das nicht als gültige Methode, um das Steuerelement aufzurufen.

Ich habe auch versucht, updateValueAndValidity() ohne Erfolg aufzurufen :(.

Ich würde einfach ngControl="dept" für das Formularelement verwenden, wie ich es mit dem Rest des Formulars mache, aber es ist eine benutzerdefinierte Direktive/Komponente.

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>
110
Matthew Brown

Aktualisiert: 19/03/2017

this.form.controls['dept'].setValue(selected.id);

ALT:

Vorerst sind wir gezwungen, einen Typ zu machen:

(<Control>this.form.controls['dept']).updateValue(selected.id)

Nicht sehr elegant stimme ich zu. Ich hoffe, dass dies in zukünftigen Versionen verbessert wird.

191
Filoche

In Angular 2 Final (RC5 +) gibt es neue APIs zum Aktualisieren von Formularwerten. Die patchValue()-API-Methode unterstützt teilweise Formularaktualisierungen, bei denen nur einige Felder angegeben werden müssen:

this.form.patchValue({id: selected.id})

Es gibt auch die API-Methode setValue(), die ein Objekt mit allen Formularfeldern benötigt. Wenn ein Feld fehlt, wird ein Fehler angezeigt.

88

Aangular 2 final hat APIs aktualisiert. Sie haben viele Methoden dazu hinzugefügt.

So aktualisieren Sie die Formularsteuerung vom Controller:

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

Keine Notwendigkeit, die Fehler zurückzusetzen

Verweise

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

12

Sie könnten dies versuchen:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

Für weitere Einzelheiten können Sie sich den entsprechenden JS-Doc bezüglich des zweiten Parameters der updateValue-Methode anschauen: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms /model.ts#L269 .

9

Nichts davon hat für mich gearbeitet. Ich musste es tun:

  this.myForm.get('myVal').setValue(val);
4
chovy
  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Wenn Sie nicht jedes Feld manuell festlegen möchten.

3
bendyourtaxes

@ Filoche Angular 2 aktualisierte Lösung. FormControl verwenden

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

Alternativ können Sie @ AngularUniversitys solution verwenden, die patchValue

2
zurfyx

Sie können die folgenden Methoden verwenden, um den Wert eines reaktiven Formularsteuerelements zu aktualisieren. Jede der folgenden Methoden passt zu Ihren Bedürfnissen.

Methoden mit setValue ()

this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);

Methoden, die patchValue () verwenden

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

Bei der letzten Methode werden alle Steuerelemente im Formular durchlaufen, sodass sie bei der Aktualisierung eines einzelnen Steuerelements nicht bevorzugt werden 

Sie können eine beliebige Methode innerhalb des Ereignishandlers verwenden.

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

Sie können bei Bedarf mehrere Steuerelemente in der Formulargruppe aktualisieren

this.form.patchValue({"dept": selected.id, "description":"description value"});
2
vivekkurien

Tipp: Wenn Sie setValue verwenden, aber keine every - Eigenschaft im Formular angeben, erhalten Sie eine Fehlermeldung:

Must supply a value for form control with name: 'stateOrProvince'. 

Sie könnten versucht sein, patchValue zu verwenden, aber dies kann gefährlich sein, wenn Sie versuchen, ein gesamtes Formular zu aktualisieren. Ich habe eine address, die möglicherweise stateOrProvince oder stateCd nicht hat, je nachdem, ob es sich um US oder weltweit handelt.

Stattdessen können Sie wie folgt aktualisieren - dabei werden die Nullen als Standard verwendet:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );
0
Simon_Weaver