Imposta manualmente valore per controllo FormBuilder

Question

Questo mi sta facendo impazzire, sono sotto la pistola e non posso permettermi di passare un altro giorno intero su questo.

Sto provando a impostare manualmente un valore di controllo ('dept') all'interno del componente, e il suo funzionamento non funziona - anche i nuovi registri dei valori da gestire correttamente.

Ecco la FormBuilder Istanza:

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

Questo è il gestore di eventi che riceve il reparto selezionato:

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

Ora, quando il modulo viene inviato e ho disconnettersi this.form il campo è ancora vuoto! Ho visto altri ppl usare updateValue() ma questa è la versione beta.1 e non la vedo come un metodo valido per chiamare il controllo.

Ho anche provato a chiamare updateValueAndValidity() senza successo :(.

Vorrei solo usare ngControl="dept" sull'elemento modulo, come sto facendo con il resto della forma, ma la sua direttiva custom/componente.

<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> 

Answer 1

Aggiornato: 19/03/2017

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

VECCHIO:

Per ora siamo costretti a fare un tipo di getto:

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

Non molto elegante, sono d'accordo. Spero che questo sia migliorato nelle versioni future.

Answer 2

si potrebbe provare questo:

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

Per maggiori dettagli, si potrebbe avere uno sguardo al corrispondente Doc JS per quanto riguarda la s Parametro econd del metodo updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

speranza che heps voi, Thierry

Answer 3

In Angular 2 Final (RC5 +) ci sono nuove API per l'aggiornamento dei valori del modulo. Il metodo patchValue() API supporta aggiornamenti forma parziale, dove abbiamo solo bisogno di specificare alcuni dei campi:

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

C'è anche il metodo setValue() API che ha bisogno di un oggetto con tutti i campi del modulo. Se manca un campo, avremo un errore.

Answer 4

Aangular 2 final ha aggiornato le API. Hanno aggiunto molti metodi per questo.

Per aggiornare il controllo di modulo dal regolatore fare questo:

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

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

Non c'è bisogno di resettare gli errori

Riferimenti

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

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

Answer 5

let cloneObj = Object.assign({}, this.form.getRawValue(), someClass); 
    this.form.complexForm.patchValue(cloneObj); 

Se non si desidera impostare manualmente ciascun campo.

Answer 6

@ Filoche's Angular 2 soluzione aggiornata. Utilizzando FormControl

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

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

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

In alternativa è possibile utilizzare @ di solution AngularUniversity che utilizza patchValue