Kontrol nonaktif Angular 2 tidak disertakan dalam form.value

113

Saya perhatikan bahwa jika saya menonaktifkan kontrol pada bentuk reaktif Angular 2 maka kontrol tidak disertakan dalam form.value. Misalnya, jika saya mendefinisikan formulir saya seperti di bawah ini:

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

dan periksa this.notelinkingForm.value, jika semua kontrol diaktifkan maka outputnya adalah:

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

Namun, ketika beberapa kontrol dinonaktifkan, itu akan menjadi:

{"Enabled":true}

Perhatikan bagaimana kontrol yang dinonaktifkan dikecualikan.

Maksud saya adalah saat formulir berubah, saya ingin meneruskan form.value dengan semua properti di dalamnya ke API lainnya. Ini jelas tidak akan mungkin jika tidak berisi item yang dinonaktifkan.

Apakah saya melewatkan sesuatu di sini atau apakah ini perilaku yang diharapkan? Apakah ada cara untuk memberi tahu Angular agar menyertakan item yang dinonaktifkan di form.value?

Selamat datang di pikiran Anda.

angular angular2-forms Jim Culverwell
sumber

Jawaban:

246

Kamu bisa memakai:

this.notelinkingForm.getRawValue()

Dari dokumen :

Jika Anda ingin memasukkan semua nilai tanpa memandang status nonaktif, gunakan metode ini. Jika tidak, valueproperti adalah cara terbaik untuk mendapatkan nilai grup.

Sasxa
sumber
41
Bertanya-tanya mengapa tim Angular melakukan ini
inorganik
@inorganik Mereka melakukannya karena dimungkinkan untuk mengaktifkan kontrol yang dinonaktifkan dan mengedit nilainya. Dalam kasus ini getRawValue () akan mengembalikan objek dengan nilai yang dirusak.
Denmark
1
Ini sebenarnya hal yang bagus. Sebagai contoh, saya tahu bahwa nilai dari kontrol saya yang dinonaktifkan tidak akan berubah jadi saya tidak ingin memasukkannya ke dalam save API karena saya menetapkan kontrol tersebut sebuah nilai dari database. Tetapi dalam beberapa kasus, saya sebenarnya ingin menyertakan kontrol yang memiliki nilai yang ditetapkan dari ujung depan dan tidak disimpan dalam DB dan fungsi ini mencakupnya. Itu selalu bagus untuk memiliki kedua opsi.
ChiragMS
Itu benar @ChiragMS. Saya suka aspek itu selama saya punya pilihan antara readonlydan disabled. Tetapi ini tidak terjadi untuk misalnya kotak centang dan tombol radio seperti yang saya jelaskan dalam jawaban di bawah ini. Dalam kasus-kasus itu saya tidak suka bahwa saya harus mendapatkan data secara berbeda dan mengkodekan sesuatu secara khusus untuk kasus itu.
Sandro
10

Opsi lain yang saya gunakan adalah:

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

Luis Ricardo Cayetano Herrera
sumber
7

Terima kasih @Sasxa karena telah memberikan saya 80% apa yang saya butuhkan.

Bagi Anda yang mencari solusi untuk masalah yang sama tetapi untuk formulir bersarang, saya dapat menyelesaikannya dengan mengubah biasanya 

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

untuk 

this.notelinkingForm.getRawValue().nestedForm
eper
sumber
0

Jika Anda menggunakan readonlybukannya disableditu masih tidak dapat diedit sementara data akan dimasukkan ke dalam formulir. Tetapi itu tidak mungkin dalam semua kasus. Misalnya, tidak tersedia untuk tombol radio dan kotak centang. Lihat dokumen web MDN . Dalam kasus tersebut, Anda harus mengajukan permohonan solusi lain yang disediakan di sini.

Sandro
sumber