Bagaimana cara menyimpan beberapa nilai kotak centang dalam bentuk reaktif di sudut2?

Saya sedang mengerjakan aplikasi sudut2 dan mendapatkan masalah dalam menyimpan nilai beberapa kotak centang di bidang formulir.

Ketik skrip

form : FormGroup;
cities = ["Mohali", "Chandigarh", "Ludhiana", "Amritsar"];
zip_codes = ["282001", "456123", "123456", "140412"];

constructor(private formBuilder : FormBuilder)
{
    this.form = this.formBuilder.group({
       cities   : this.formBuilder.array(["Mohali", "Amritsar"]),
       zip_codes : this.formBuilder.array(["456123"])
    });
}

HTML

<div *ngFor="let city of cities">
    <input type="checkbox" formControlName="cities" value="city">
    <span>{{city}}</span>
</div>

<div *ngFor="let zipCode of zip_codes">
    <inbput type="checkbox" formControlName="zip_codes" value="zipCode">
     <span>{{zipCode}}</span>
</div>

Saya ingin menyimpan kota dan kode pos yang dicentang di bidang formulir dan ketika saya memiliki nilai default di bidang formulir maka nilai dalam array akan diperiksa secara otomatis.


angular angular2-forms
person Lakhvir Singh    schedule 24.07.2017    source sumber
comment
Barang apa saja yang harus diperiksa?   -  person yurzui    schedule 24.07.2017
comment
Saya memperbarui pertanyaan saya.   -  person Lakhvir Singh    schedule 24.07.2017

Jawaban (2)


arrow_upward
22
arrow_downward

Salah satu caranya adalah seperti ini:

1) Siapkan FormArray bidang dengan false nilai default

this.form = this.formBuilder.group({
  cities   : this.formBuilder.array(this.cities.map(x => !1)),
  zip_codes : this.formBuilder.array(this.zip_codes.map(x => !1))
});

2) Templatnya akan terlihat seperti ini:

<div *ngFor="let city of cities; let i = index" formArrayName="cities">
  <input type="checkbox" [formControlName]="i">
  <span>{{city}}</span>
</div>

<div *ngFor="let zipCode of zip_codes; let i = index" formArrayName="zip_codes">
  <input type="checkbox" [formControlName]="i">
  <span>{{zipCode}}</span>
</div>

3) Kirim formulir

convertToValue(key: string) {
  return this.form.value[key].map((x, i) => x && this[key][i]).filter(x => !!x);
}

onSubmit() {
  const valueToStore = Object.assign({}, this.form.value, {
    cities: this.convertToValue('cities'),
    zip_codes: this.convertToValue('zip_codes')
  });
  console.log(valueToStore);
}

4) Nilai bawaan

const defaultCities = ["Mohali", "Amritsar"];
const defaultZipCodes = ["456123"];
this.form = this.formBuilder.group({
  cities: this.formBuilder.array(this.cities.map(x => defaultCities.indexOf(x) > -1)),
  zip_codes: this.formBuilder.array(this.zip_codes.map(x => defaultZipCodes.indexOf(x) > -1))
});

Contoh Plunker

person yurzui    schedule 24.07.2017
comment
Saya tidak ingin keluaran seperti ini ( kota: [benar, benar, benar, benar]), saya ingin (kota : [Mohali, Amritsar]). - person Lakhvir Singh; 24.07.2017
comment
@LakhvirSingh Coba tombol kirim - person yurzui; 24.07.2017
comment
Terima kasih ini berhasil tetapi Anda menggunakan variabel untuk menyimpan defaultCities dan defaultZipCodes tetapi dalam situasi saya, saya tidak tahu apakah saya akan mendapatkan array kota dari api karena setiap array dan htmlnya dihasilkan berdasarkan respons api. Jika saya mendapatkan array kota di api maka secara otomatis akan menghasilkan html-nya dan menambahkan kontrol baru dalam formulir. - person Lakhvir Singh; 24.07.2017
comment
@LakhvirSingh Saya menggunakan variabel hanya sebagai contoh. Anda dapat memperbarui nilai setelah mendapatkan dari server seperti this.form.get('cities').patchValue(this.cities.map(x =› cityFromServer.indexOf(x) › -1)); plnkr.co/edit/M5mIx5idfUDpRmiaxCPk?p=preview - person yurzui; 24.07.2017
comment
Bagaimana saya bisa mendapatkan nilai formulir jika saya menggunakan Object.assign() secara terpisah di kedua bidang (kota, kode_pos). Karena ketika saya menggunakan kedua bidang secara terpisah, saya hanya akan mendapatkan satu nilai bidang pada satu waktu, tetapi saya ingin kedua nilai bidang tersebut bersamaan tetapi menggunakan Object.assign() secara terpisah. - person Lakhvir Singh; 24.07.2017
comment
Buat contoh di plunker - person yurzui; 24.07.2017
comment
Terima kasih banyak. - person Lakhvir Singh; 25.07.2017

arrow_upward
3
arrow_downward

Saya sangat menyukai jawaban @yurzui Tetapi ada masalah dengan mendapatkan kembali nilainya .. Jadi..

Solusi saya - menyelesaikannya untuk Angular 5 dengan Material View
Koneksinya melalui

formArrayName="pemberitahuan"

(ubah)="updateChkbxArray(n.id, $event.checked, 'notification')"

Dengan cara ini dapat berfungsi untuk beberapa array kotak centang dalam satu bentuk. Cukup atur nama array kontrol untuk terhubung setiap saat.

constructor(
  private fb: FormBuilder,
  private http: Http,
  private codeTableService: CodeTablesService) {

  this.codeTableService.getnotifications().subscribe(response => {
      this.notifications = response;
    })
    ...
}


createForm() {
  this.form = this.fb.group({
    notification: this.fb.array([])...
  });
}

ngOnInit() {
  this.createForm();
}

updateChkbxArray(id, isChecked, key) {
  const chkArray = < FormArray > this.form.get(key);
  if (isChecked) {
    chkArray.push(new FormControl(id));
  } else {
    let idx = chkArray.controls.findIndex(x => x.value == id);
    chkArray.removeAt(idx);
  }
}
<div class="col-md-12">
  <section class="checkbox-section text-center" *ngIf="notifications  && notifications.length > 0">
    <label class="example-margin">Notifications to send:</label>
    <p *ngFor="let n of notifications; let i = index" formArrayName="notification">
      <mat-checkbox class="checkbox-margin" (change)="updateChkbxArray(n.id, $event.checked, 'notification')" value="n.id">{{n.description}}</mat-checkbox>
    </p>
  </section>
</div>

Pada akhirnya Anda dapat menyimpan formulir dengan serangkaian id catatan asli untuk disimpan/diperbarui. Tampilan UI

Bagian yang relevan dari json formulir

Akan dengan senang hati mendapat komentar untuk perbaikan.

Berikut Intinya

person Tzvi Gregory Kaidanov    schedule 23.05.2018