Wyłączone kontrolki kątowe 2 nie są uwzględniane w form.value

113

Zauważyłem, że jeśli wyłączę formant w formularzu reaktywnym Angular 2, wówczas formant nie zostanie uwzględniony w form.value. Na przykład, jeśli zdefiniuję swój formularz jak poniżej:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

i sprawdź this.notelinkingForm.value, jeśli wszystkie kontrolki są włączone, wynik będzie wyglądał następująco:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

Jednak gdy niektóre elementy sterujące są wyłączone, byłoby to:

{"Enabled":true}

Zwróć uwagę, jak wyłączone są wyłączone kontrolki.

Moim zamiarem jest to, że gdy formularz się zmieni, chcę mieć możliwość przekazania form.value ze wszystkimi właściwościami do mojego pozostałego interfejsu API. Nie będzie to oczywiście możliwe, jeśli nie będzie zawierał wyłączonych elementów.

Czy coś mi tu brakuje, czy jest to oczekiwane zachowanie? Czy istnieje sposób, aby powiedzieć Angularowi, aby uwzględnił wyłączone elementy w form.value?

Powitaj swoje myśli.

angular angular2-forms

— Jim Culverwell
źródło

247

Możesz użyć:

this.notelinkingForm.getRawValue()

Z dokumentów :

Jeśli chcesz uwzględnić wszystkie wartości niezależnie od stanu wyłączenia, użyj tej metody. W przeciwnym razie valuewłaściwość jest najlepszym sposobem na uzyskanie wartości grupy.

— Sasxa
źródło

42

Ciekawe, dlaczego zespół Angular to zrobił

— inorganik

@inorganik Zrobili to, ponieważ można włączyć wyłączoną kontrolkę i edytować jej wartość. W takim przypadku getRawValue () zwróci obiekt z naruszoną wartością.

— Duński

1

To właściwie dobra rzecz. Na przykład wiem, że wartości moich wyłączonych kontrolek nie zmienią się, więc nie chcę ich włączać do zapisywania API, ponieważ w pierwszej kolejności przypisałem tym kontrolkom wartość z bazy danych. Ale w niektórych przypadkach faktycznie chcę uwzględnić te kontrolki, które mają wartości przypisane z przodu i nie są przechowywane w bazie danych, a ta funkcja to obejmuje. Zawsze dobrze jest mieć obie opcje.

— ChiragMS

To prawda @ChiragMS. Podoba mi się ten aspekt, o ile mam wybór między readonlya disabled. Ale tak nie jest w przypadku np. Pól wyboru i przycisków opcji, jak opisałem w odpowiedzi poniżej. W takich przypadkach nie podobało mi się, że muszę inaczej pobierać dane i kodować coś specjalnie dla tego przypadku.

— Sandro

10

Inną opcją, której używam, jest:

this.form.controls['LinkToPreceeding'].value;

— Luis Ricardo Cayetano Herrera
źródło

7

Dziękuję @Sasxa za dostarczenie mi 80% tego, czego potrzebowałem.

Dla tych z Was, którzy szukają rozwiązania tego samego problemu, ale w przypadku zagnieżdżonych formularzy udało mi się rozwiązać, zmieniając mój zwykły

this.notelinkingForm.get('nestedForm').value

do

this.notelinkingForm.getRawValue().nestedForm

— eper
źródło

0

Jeśli używasz readonlyzamiast disabledtego, nadal nie można go edytować, podczas gdy dane zostaną uwzględnione w formularzu. Ale nie we wszystkich przypadkach jest to możliwe. Np. Nie jest dostępne dla przycisków opcji i pól wyboru. Zobacz dokumentację internetową MDN . W takich przypadkach należy złożyć wniosek o inne rozwiązania podane tutaj.

— Sandro
źródło