Açısal 2 devre dışı bırakılan denetimler form.value'ya dahil edilmez

113

Bir Angular 2 reaktif formundaki bir kontrolü devre dışı bırakırsam, kontrolün form.value'ya dahil edilmediğini fark ettim. Örneğin formumu aşağıdaki gibi tanımlarsam:

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

ve this.notelinkingForm.value değerini kontrol edin, tüm kontroller etkinleştirilmişse, çıktı şu şekilde olacaktır:

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

Ancak, bazı kontroller devre dışı bırakıldığında şunlar olur:

{"Enabled":true}

Devre dışı bırakılan kontrollerin nasıl hariç tutulduğuna dikkat edin.

Niyetim, form değiştiğinde form.value'yu içindeki tüm özelliklerle rest API'ime geçirebilmemdir. Devre dışı bırakılan öğeleri içermiyorsa, bu açıkça mümkün olmayacaktır.

Burada bir şey mi özlüyorum yoksa bu beklenen davranış mı? Angular'a, devre dışı bırakılan öğeleri form.value'ya dahil etmesini söylemenin bir yolu var mı?

Düşüncelerinize hoş geldiniz.

angular angular2-forms

— Jim Culverwell
kaynak

247

Kullanabilirsiniz:

this.notelinkingForm.getRawValue()

Gönderen docs :

Devre dışı durumundan bağımsız olarak tüm değerleri dahil etmek istiyorsanız, bu yöntemi kullanın. Aksi takdirde, valueözellik, grubun değerini almanın en iyi yoludur.

— Sasxa
kaynak

42

Angular ekibinin bunu neden yaptığını merak ediyorum

— inorganik

@inorganik Bunu yaptılar çünkü devre dışı bırakılmış bir kontrolü etkinleştirmek ve değerini düzenlemek mümkün. Bu durumda getRawValue (), değiştirilmiş değere sahip bir nesne döndürür.

— Danimarka

1

Bu aslında iyi bir şey. Örneğin, devre dışı bırakılan kontrollerimin değerlerinin değişmeyeceğini biliyorum, bu yüzden onları kaydetme API'sine dahil etmek istemiyorum çünkü bu kontrollere ilk etapta veritabanından bir değer atadım. Ancak bazı durumlarda, değerleri ön uçtan atanan ve DB'de depolanmayan kontrolleri dahil etmek istiyorum ve bu işlev onu kapsıyor. Her iki seçeneğin de olması her zaman iyidir.

— ChiragMS

Bu doğru @ChiragMS. Ben sürece bu yönü gibi arasında bir seçim olarak readonlyve disabled. Ancak, aşağıdaki yanıtta açıkladığım gibi onay kutuları ve radyo düğmeleri için durum böyle değildir. Bu gibi durumlarda, verileri farklı şekilde almam ve bu durum için özel olarak bir şeyler kodlamam hoşuma gitmedi.

— Sandro

10

Kullandığım başka bir seçenek:

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

— Luis Ricardo Cayetano Herrera
kaynak

7

Bana ihtiyacım olanın% 80'ini aldığın için teşekkürler @Sasxa .

Aynı soruna çözüm arayanlar için ama iç içe geçmiş formlar için her zamanki yöntemimi değiştirerek çözebildim

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

-e

this.notelinkingForm.getRawValue().nestedForm

— eper
kaynak

0

Eğer kullanırsanız readonlyyerine disabledo veri şeklinde dahil edilecektir ise hala düzenlenebilir değil. Ancak bu her durumda mümkün değildir. Örneğin, radyo düğmeleri ve onay kutuları için kullanılamaz. MDN web belgelerine bakın . Bu durumlarda, burada sunulan diğer çözümlere başvurmanız gerekir.

— Sandro
kaynak