Angular2 Update-Formular Steuerwert

Question

Ich habe ein Problem Aufbau dynamische angular2 Formen mit Kontrollen und Auswahlbox, diese zum Beispiel plunker:

<select class="form-control" ngControl="power"> 
     <option *ngFor="#p of powers" [value]="p">{{p}}</option> 
    </select> 

Sie einen Helden Leistung auswählen und die Steuerung den gleichen Wert haben . Wenn Sie jedoch Change Powers drücken, wäre der ausgewählte Wert null, aber der Kontrollwert ist immer noch der alte Wert. Dies ist ein ernsthaftes Problem, das ich denke, da dies eine Quelle für viele Bugs ist, wenn das Formular eine Sache zeigt, aber in Wirklichkeit wird es etwas anderes vorschlagen, gibt es eine Möglichkeit, den Inhalt des Steuerelements zu aktualisieren? Es gibt updateValue(), aber Sie müssen den Wert in all diesen Fällen manuell einstellen.

Es gibt auch einen ähnlichen Fall, wenn Sie die Selectbox-Optionen nach dem Formularaufbau aktualisieren, wird es einen ausgewählten Wert in der ausgewählten Box anzeigen, während der Steuerwert wäre Null, irgendwelche Ideen, wie damit umzugehen?

Answer 1

Derzeit ist dies das einzige, was Sie tun können (wie in der Frage erwähnt)

this.form.controls['power'].updateValue(null); 

Es ist eine offene Frage einer Form https://github.com/angular/angular/issues/4933

Es gibt auch eine Pull-Anforderung zurückgesetzt werden kann, aber das erlaubt Ihnen auch, es "manuell" für jede Steuerung zu setzen, aber erlaubt auch, Zustände wie ursprünglich, berührt zurückzusetzen, ... https://github.com/angular/angular/pull/6679

Answer 2

Sie können versuchen, Formart unveränderlich zu behalten. Wenn Sie es zurücksetzen müssen, erstellen Sie es einfach neu. Auf diese Weise können Sie sicher sein, dass es auf dem neuesten Stand ist. Sie können die Werte auch irgendwo speichern und das Formular auf diese Werte zurücksetzen. Sagen Sie ein Element bearbeiten, wenn Sie setzen Sie auf die ursprünglichen Werte zurückgesetzt, nicht nur ein leeres Formular ...

export class TheForm { 
    public form: ControlGroup; 
    public controls = (value: any = {}) => ({ 
    'id': [value.id], 
    'name': [value.name, Validators.required] 
    }); 

    constructor() { 
    let values = some_values_from_database || {}; 
    this.build(values); 
    } 

    build(value) { 
    this.form = this._builder.group(this.controls(value)); 
    } 

    submit() { 
    console.log(this.form.value); 
    } 
} 

ich die Grundform erstellt haben, die diese Art von Funktionalität Griffe mit @ngrx/store, hier ist the Gist. Wenn ich ein Formular für anderes Modell benötigen, ich BaseForm verlängern würde und controls und submit() Methode nur definieren, der Rest wird geerbt ...

Answer 3

In Angular 2 Final (RC5 +) gibt es neue APIs für Formularwerte zu aktualisieren. Die patchValue() API-Methode unterstützt partielles Form-Updates, wo wir brauchen, um nur einige der Felder angeben:

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

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

Answer 4

Der Code ist:

(<FormControl>this.form.controls['power']).updateValue(data); 

Answer 5

aktualisieren

zum neuesten Update der angular2 Syntax wird wie dieser

this.form.controls['power'].setValue('anthing here'); 

Answer 6

[Angular 2 Stable]

Hier ist ein schmutziges Weg nur mit NgModel (und ohne andere Form Builder oder Form-Group-Module zu importieren)

// 
// set form field, "foo" value to "bar" 
// 

// 
// view 
// 
<form #formRef="ngForm"> 
    <input name="foo" [(ngModel)]="foo"></input> 
</form> 

// 
// controller 
// 
class { 
    @ViewChild('formRef') form: NgModel; 

    ngAfterViewInit() { 
     setTimeout(() => { 
      this.form['controls']['foo'].setValue('bar'); 
     }); 
    } 
}