Ręcznie ustawiona wartość dla FormBuilder Control

Question

To doprowadza mnie do szału, jestem pod bronią i nie mogę pozwolić sobie na spędzanie całego dnia na tym.

Próbuję ręcznie ustawić wartość kontrolną ("dept") w komponencie, a jej po prostu nie działa - nawet nowe logi wartości do konsoli prawidłowo.

Oto FormBuilder Instance:

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

To obsługi zdarzeń, które odbiera wybraną dept:

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

Teraz, gdy formularz jest składany i wylogować this.form pole jest nadal pusty! Widziałem inne użycie ppl updateValue(), ale jest to wersja beta.1 i nie widzę tego jako prawidłowej metody wywoływania kontroli.

Próbowałem również zadzwonić updateValueAndValidity() bezskutecznie :(.

chciałbym po prostu użyć ngControl="dept" na elemencie formularza, jak robię z resztą postaci, ale jego dyrektywy zwyczaj/komponentu.

<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

Aktualizacja: 19/03/2017

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

OLD:

Na razie jesteśmy zmuszeni zrobić to typ obsady:

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

Niezbyt elegancko Zgadzam się. Mam nadzieję, że to się poprawi w przyszłych wersjach.

Answer 2

można spróbować to:

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

Aby uzyskać więcej informacji, można spojrzeć na odpowiednim JS Doc dotyczącą s Parametr econd metody updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

nadzieję, że heps ty, Thierry

Answer 3

W Angular 2 Final (RC5 +) dostępne są nowe interfejsy API do aktualizowania wartości formularzy. Metoda patchValue() API obsługuje częściowych aktualizacji formularza, w którym należy określić tylko niektóre z dziedzin:

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

Istnieje również metoda setValue() API, które musi obiekt z wszystkich pól formularza. Jeśli brakuje pola, otrzymamy błąd.

Answer 4

Aangular 2 final ma zaktualizowane interfejsy API. Dodali do tego wiele metod.

Aby zaktualizować kontrolę formularz ze sterownika to zrobić:

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

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

Nie ma potrzeby, aby zresetować błędy

Referencje

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

Jeśli nie chcesz ręcznie ustawić każde pole.

Answer 6

@ Kątowymi 2 zaktualizowanej rozwiązania Filoche użytkownika. Korzystanie FormControl

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

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

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

Alternatywnie można użyć @ AngularUniversity na solution który wykorzystuje patchValue