Kotak centang mencantumkan nilai dalam formulir

Saya baru mengenal Angular 2 jadi saya memerlukan saran Anda untuk mencapai pengembangan. Saya sedang mengerjakan komponen formulir buat/perbarui. Saya memiliki daftar kotak centang dengan nilai default (dicentang atau tidak, itu tergantung pada layanan). Ini kode saya:

@Component({
  selector: 'app-campaign',
  template: `
  <form [formGroup]="campaignForm" (ngSubmit)="saveCampaign()" novalidate>
    <label for="formations">Formations</label>
    <ul *ngFor="let formation of formations">
      <li>
        <label>
          <input 
            type="checkbox" 
            [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
            {{formation.formation}}
        </label>
      </li>
    </ul>
    <input 
      type="submit" 
      class="btn btn-primary" 
      value="Save" 
      [disabled]="campaignForm.invalid"/>
  </form
  `,
  styleUrls: ['./campaign.component.css'],
  providers: [CampaignService, FormationService]
})
export class CampaignComponent implements OnInit {

  id: number = 0;
  campaignForm: FormGroup;        
  title: string = "New campaign";
  errorMessage: any;
  formations: Formation[];

  constructor(
    private _fb: FormBuilder,
    private _campaignService : CampaignService,
    private _formationService: FormationService
    ) { 
      this.campaignForm = this._fb.group({  
        id: ''
        , description: ["", Validators.required]
        // ...
      });

      if (this._avRoute.snapshot.params["id"]) {
        this.id = parseInt( this._avRoute.snapshot.params["id"]);
      }
    }

  ngOnInit() {
    // Case : Update Form
    if(this.id > 0){ 
      this.title = 'Update';    
      this._formationService.selectedFormations(this.id)
      .subscribe(formations =>
        this.formations=formations['records']
      );
    } 
    // Case : Create Form
    else {
      this._formationService.listActiveFormations()
      .subscribe(formations =>
        this.formations=formations['records']
      );
    }
  }

  saveCampaign(){ 
    this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
        this._router.navigate(['campaigns']);
     }, error => this.errorMessage = error )
  }
}

Pertanyaan saya :

  • Bagaimana cara mengatur data default untuk daftar kotak centang saya?

  • Apakah mungkin untuk memperbarui nilai default ini ketika pengguna mencentang atau menghapus centang pada kotak?

  • Apakah FormArray merupakan pilihan yang baik untuk menyelesaikan masalah saya?

  • Dan tolong, beri tahu saya jika Anda melihat kebiasaan buruk dalam kode saya, saya tidak mendapat imbalan apa pun ... Saya banyak bertanya tetapi saya terhenti untuk sementara waktu sekarang ...

PS: Saya mencoba melakukannya tanpa komponen yang ada untuk meningkatkan keterampilan sudut2 saya.

Terima kasih atas saran Anda


person amt59    schedule 21.11.2017    source sumber


Jawaban (2)


Anda dapat menggunakan FormArray untuk kasus ini, untuk mengulangi data di formations dan mendorong setiap objek sebagai FormGroup ke FormArray di formulir Anda.

Atau, Anda bisa langsung mengirimkan formulir, mengisi FormArray Anda dengan nilai formations.

Menggunakan opsi terakhir, seperti yang sudah Anda lakukan, Anda akan mengulangi array dan menampilkan kotak centang. Anda dapat menggunakan [(ngModel)] sebagai ganti [attr.checked]. Dengan itu, Anda perlu menambahkan [ngModelOptions]="{standalone: true} karena ini adalah bentuk reaktif. Jadi daftar Anda akan terlihat seperti ini:

<ul>
  <li *ngFor="let formation of formations">
    <label>
      <input 
        type="checkbox" 
        [(ngModel)]="formation.formationCochee"
        [ngModelOptions]="{standalone: true}">
        {{formation.formation}}
    </label>
  </li>
</ul>

Saat Anda membuat formulir, tambahkan FormArray kosong untuk array Anda:

this.campaignForm = this.fb.group({
  formations: this.fb.array([])
});

Kemudian saat Anda mengirimkan formulir, Anda dapat mengganti FormArray yang kosong itu dengan formations Anda:

saveCampaign(){ 
  this.campaignForm.setControl('formations', this.fb.array(this.formations))
  this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
       this._router.navigate(['campaigns']);
    }, error => this.errorMessage = error )
}
person AJT82    schedule 22.11.2017

  • Bagaimana cara menyetel data default untuk daftar kotak centang saya?

     [attr.checked]="formation.formationCochee">
    

Di JS, Anda memiliki nilai benar dan salah. Misalnya, 1 adalah nilai kebenaran yang artinya is true. Angular akan memahami apa yang ingin Anda lakukan, dan mencentang kotak untuk Anda.

  • Apakah mungkin untuk memperbarui nilai default ini ketika pengguna mencentang atau menghapus centang pada kotak?

Tidak. Jika pengguna memperbarui nilai default, maka itu bukan nilai default lagi! Kalau tidak, saya tidak mengerti pertanyaan Anda, mungkin Anda bisa mengulanginya?

  • Apakah FormArray merupakan pilihan yang baik untuk menyelesaikan masalah saya?

Apa sebenarnya masalah Anda? Anda tidak menyebutkan masalah apa pun, Anda hanya mengajukan pertanyaan ...

  • Dan tolong beri tahu saya jika Anda melihat kebiasaan buruk dalam kode saya

    <ul *ngFor="let formation of formations">

Anda sebaiknya mengulangi tag li : tag ul/ol hanyalah wadah daftar, sedangkan li adalah item daftar.

<label>
      <input 
        type="checkbox" 
        [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
        {{formation.formation}}
    </label>

Label tidak boleh berisi masukan. Label dimaksudkan untuk mendeskripsikan masukan, artinya mampu berinteraksi dengan masukan dengan atribut for.

person Community    schedule 21.11.2017