Tetapkan Nilai secara Manual untuk Kontrol FormBuilder

Ini membuatku gila, aku di bawah pistol dan tidak mampu menghabiskan satu hari lagi untuk ini.

Saya mencoba untuk secara manual menetapkan nilai kontrol ('dept') di dalam komponen, dan itu tidak berfungsi - bahkan nilai baru log untuk menghibur dengan benar.

Berikut adalah Instance FormBuilder:

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

Ini adalah pengendali acara yang menerima departemen yang dipilih:

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

Sekarang ketika formulir dikirimkan dan saya logout this.formlapangan masih kosong! Saya telah melihat penggunaan ppl lain updateValue()tetapi ini adalah beta.1 dan saya tidak melihat itu sebagai metode yang valid untuk memanggil kontrol.

Saya juga mencoba menelepon updateValueAndValidity()tanpa hasil :(.

Saya hanya akan menggunakan ngControl="dept"pada elemen form, seperti yang saya lakukan dengan sisa form tetapi dengan direktif / komponen kustom.

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

Diperbarui: 19/03/2017

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

TUA:

Untuk saat ini kami dipaksa melakukan pemeran:

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

Saya tidak terlalu elegan. Semoga ini diperbaiki di versi mendatang.

Di Angular 2 Final (RC5 +) ada API baru untuk memperbarui nilai formulir. The patchValue()Metode API mendukung pembaruan bentuk parsial, di mana kita hanya perlu menentukan beberapa bidang:

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

Ada juga setValue()metode API yang membutuhkan objek dengan semua bidang formulir. Jika ada bidang yang hilang, kami akan mendapatkan kesalahan.

Final Aangular 2 telah memperbarui API. Mereka telah menambahkan banyak metode untuk ini.

Untuk memperbarui kontrol bentuk dari pengontrol, lakukan ini:

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

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

Tidak perlu mengatur ulang kesalahan

Referensi

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Anda bisa menggunakan metode berikut untuk memperbarui nilai kontrol formulir reaktif. Salah satu dari metode berikut ini sesuai dengan kebutuhan Anda.

Metode menggunakan setValue ()

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

Metode menggunakan patchValue ()

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

Metode terakhir akan mengulang semua kontrol dalam formulir sehingga tidak disukai saat memperbarui kontrol tunggal

Anda dapat menggunakan salah satu metode di dalam pengendali event

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

Anda dapat memperbarui beberapa kontrol dalam grup formulir jika perlu menggunakan

this.form.patchValue({"dept": selected.id, "description":"description value"});

Anda bisa mencoba ini:

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

Untuk detail lebih lanjut, Anda bisa melihat pada JS Doc terkait mengenai parameter kedua updateValuemetode: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model. ts # L269 .

Tak satu pun dari ini bekerja untuk saya. Saya harus melakukan:

  this.myForm.get('myVal').setValue(val);

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Jika Anda tidak ingin mengatur setiap bidang secara manual.

@ Diperbarui solusi Angular 2 Filoche's. MenggunakanFormControl

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

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

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

Atau Anda dapat menggunakan solusi @ AngularUniversity yang digunakanpatchValue

Saya tahu jawabannya sudah diberikan tetapi saya ingin memberikan jawaban singkat bagaimana cara memperbarui nilai formulir sehingga pendatang baru lainnya bisa mendapatkan ide yang jelas.

struktur formulir Anda sangat sempurna untuk digunakan sebagai contoh. jadi, sepanjang jawaban saya, saya akan menyatakannya sebagai formulir.

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

jadi formulir kami adalah tipe objek FormGroup yang memiliki tiga FormControl .

Ada dua cara untuk memperbarui nilai model:

• Gunakan metode setValue () untuk menetapkan nilai baru untuk kontrol individu. Metode setValue () secara ketat mematuhi struktur grup formulir dan mengganti seluruh nilai untuk kontrol.

• Gunakan metode patchValue () untuk mengganti properti yang didefinisikan dalam objek yang telah berubah dalam model formulir.

Pemeriksaan ketat metode setValue () membantu menangkap kesalahan bersarang dalam bentuk kompleks, sementara patchValue () gagal secara diam-diam pada kesalahan tersebut.

Dari dokumentasi resmi Angular di sini

jadi, Saat memperbarui nilai untuk contoh grup formulir yang berisi beberapa kontrol, tetapi Anda mungkin hanya ingin memperbarui bagian model. patchValue () adalah yang Anda cari.

mari kita lihat contohnya. Ketika Anda menggunakan patchValue ()

this.form.patchValue({
    dept: 1 
});
//here we are just updating only dept field and it will work.

tetapi ketika Anda menggunakan setValue () Anda perlu memperbarui model lengkap karena secara ketat mematuhi struktur grup formulir. jadi, jika kita menulis

this.form.setValue({
    dept: 1 
});
// it will throw error.

Kita harus melewati semua properti dari model grup formulir. seperti ini

this.form.setValue({
      name: 'Mr. Bean'
      dept: 1,
      description: 'spome description'
  });

tapi saya tidak sering menggunakan gaya ini. Saya lebih suka menggunakan pendekatan berikut yang membantu menjaga kode saya lebih bersih dan lebih mudah dipahami.

Apa yang saya lakukan adalah, saya mendeklarasikan semua kontrol sebagai variabel terpisah dan menggunakan setValue () untuk memperbarui kontrol tertentu.

untuk bentuk di atas, saya akan melakukan sesuatu seperti ini.

get companyIdentifier(): FormControl {
    return this.form.get('name') as FormControl;
}

get dept(): FormControl {
    return this.form.get('dept') as FormControl;
}

get description(): FormControl {
    return this.form.get('description') as FormControl;
}

ketika Anda perlu memperbarui kontrol formulir gunakan saja properti itu untuk memperbaruinya. Dalam contoh, penanya mencoba memperbarui kontrol formulir dept ketika pengguna memilih item dari daftar turun bawah.

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.

  this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}

Saya sarankan untuk melihat FormGroup API untuk mengetahui bagaimana semua properti dan metode FormGroup.

Tambahan : untuk mengetahui tentang pengambil lihat di sini

Jika Anda menggunakan kontrol formulir maka cara paling sederhana untuk melakukan ini:

this.FormName.get('ControlName').setValue(value);

Kiat: Jika Anda menggunakan setValuetetapi tidak memberikan setiap properti di formulir, Anda akan mendapatkan kesalahan:

Must supply a value for form control with name: 'stateOrProvince'.

Jadi Anda mungkin tergoda untuk menggunakannya patchValue, tetapi ini bisa berbahaya jika Anda mencoba memperbarui seluruh formulir. Saya punya addressyang mungkin tidak punya stateOrProvinceataustateCd bergantung pada apakah AS atau seluruh dunia.

Sebagai gantinya, Anda dapat memperbarui seperti ini - yang akan menggunakan nulls sebagai default:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );