To doprowadza mnie do szału, jestem pod pistoletem i nie mogę sobie pozwolić na spędzenie na tym kolejnego dnia.
Próbuję ręcznie ustawić wartość kontrolną („dept”) w ramach komponentu, ale to po prostu nie działa - nawet nowa wartość loguje się do konsoli.
Oto instancja FormBuilder:
initForm() {
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required],
});
}
Oto procedura obsługi zdarzeń, która odbiera wybrany dział:
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 przesyłany i wylogowuję się, this.form
pole jest nadal puste! Widziałem inne użycie ppl, updateValue()
ale to jest beta.1 i nie uważam tego za prawidłową metodę wywoływania formantu.
Próbowałem też zadzwonić updateValueAndValidity()
bez powodzenia :(.
Po prostu użyłbym ngControl="dept"
na elemencie formularza, tak jak robię to z resztą formularza, ale jest to niestandardowa dyrektywa / komponent.
<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>
źródło
Odpowiedzi:
Zaktualizowano: 19/03/2017
STARY:
Na razie jesteśmy zmuszeni wykonać rzut typu:
Zgadzam się niezbyt eleganckie. Mam nadzieję, że to zostanie ulepszone w przyszłych wersjach.
źródło
(<Control>this.form.controls['dept']).setErrors(null)
this.form.get('dept').setValue(selected.id)
:)this.form.controls.dept.setValue(selected.id);
this.form.controls['dept'].setValue(selected.id);
W Angular 2 Final (RC5 +) są nowe API do aktualizacji wartości formularzy. Metoda
patchValue()
API obsługuje częściowe aktualizacje formularzy, gdzie musimy tylko określić niektóre pola:Istnieje również
setValue()
metoda API, która wymaga obiektu ze wszystkimi polami formularza. Jeśli brakuje pola, pojawi się błąd.źródło
updateValue
(od przyjętych Odpowiedź Filoche) jest zastąpionasetValue
updateValue()
i wprowadzeniapatchValue
orazsetValue
.Aangular 2 final zaktualizował API. Dodali do tego wiele metod.
Aby zaktualizować formant formularza z kontrolera, wykonaj następujące czynności:
Nie ma potrzeby resetowania błędów
Bibliografia
https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html
https://toddmotto.com/angular-2-form-controls-patch-value-set-value
źródło
setValue()
wywołanie aformGroup/formBuilder
wymaga ustawienia wszystkich wartości pod formularzem.patchValue()
, gdy zostanie wywołany w ten sam sposób, może służyć do aktualizacji określonych wartości.Aby zaktualizować wartość kontrolki formularza reaktywnego, można użyć następujących metod. Każda z poniższych metod będzie odpowiednia dla twoich potrzeb.
Metody używające setValue ()
Metody wykorzystujące patchValue ()
Ostatnia metoda zapętli wszystkie kontrolki w formularzu, więc nie jest preferowana podczas aktualizowania pojedynczej kontrolki
Możesz użyć dowolnej metody wewnątrz procedury obsługi zdarzeń
W razie potrzeby możesz zaktualizować wiele kontrolek w grupie formularzy przy użyciu
źródło
Możesz spróbować tego:
Aby uzyskać więcej informacji, możesz rzucić okiem na odpowiedni dokument JS dotyczący drugiego parametru
updateValue
metody: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model. ts # L269 .źródło
error TS2339: Property 'updateValue' does not exist on type 'AbstractControl'
. W tym komponencie formularz ma typControlGroup
. Być może, gdybym utworzył je indywidualnienew Control()
, zadziałałobyŻaden z nich nie działał dla mnie. Musiałem zrobić:
źródło
Jeśli nie chcesz ręcznie ustawiać każdego pola.
źródło
@ Zaktualizowano rozwiązanie Filoche's Angular 2. Za pomocą
FormControl
(<Control>this.form.controls['dept']).updateValue(selected.id)
Alternatywnie możesz skorzystać z rozwiązania @ AngularUniversity, które wykorzystuje
patchValue
źródło
Wiem, że odpowiedź została już udzielona, ale chcę udzielić krótkiej odpowiedzi, jak zaktualizować wartość formularza, aby inni nowi użytkownicy mogli uzyskać jasny pomysł.
Twoja struktura formularza jest tak idealna, aby użyć jej jako przykładu. tak więc w całej mojej odpowiedzi będę oznaczał to jako formę.
więc nasz formularz jest obiektem typu FormGroup, który ma trzy FormControl .
tak więc podczas aktualizowania wartości dla wystąpienia grupy formularzy, które zawiera wiele kontrolek, ale możesz chcieć zaktualizować tylko części modelu. patchValue () jest tym, którego szukasz.
zobaczmy przykład. Kiedy używasz patchValue ()
ale kiedy używasz setValue () , musisz zaktualizować pełny model, ponieważ ściśle odpowiada on strukturze grupy formularzy. więc jeśli napiszemy
Musimy przekazać wszystkie właściwości modelu grupy formularzy. lubię to
ale nie używam tego stylu często. Wolę stosować następujące podejście, które pomaga zachować czystość i czytelność kodu.
To co robię, to deklaruję wszystkie kontrolki jako osobną zmienną i używam setValue () do aktualizacji tej konkretnej kontrolki.
dla powyższego formularza zrobię coś takiego.
kiedy musisz zaktualizować kontrolkę formularza, użyj tej właściwości, aby ją zaktualizować. W przykładzie pytający próbował zaktualizować kontrolkę formularza działu, gdy użytkownik wybierze pozycję z rozwijanej listy.
Proponuję rzucić okiem na FormGroup API, aby poznać wszystkie właściwości i metody FormGroup.
Dodatkowe : aby dowiedzieć się więcej o getter, zajrzyj tutaj
źródło
Jeśli używasz kontroli formularzy, najprostszy sposób na zrobienie tego:
źródło
Wskazówka: jeśli używasz,
setValue
ale nie podajesz wszystkich właściwości w formularzu, pojawi się błąd:Must supply a value for form control with name: 'stateOrProvince'.
Możesz więc ulec pokusie
patchValue
, ale może to być niebezpieczne, jeśli próbujesz zaktualizować cały formularz. Mam,address
że może nie miećstateOrProvince
lubstateCd
zależności od tego, czy jest to USA czy świat.Zamiast tego możesz zaktualizować w ten sposób - co spowoduje użycie wartości null jako wartości domyślnych:
źródło