Dalam contoh ini saya ingin mendapatkan Petunjuk "Die Angabe eines Geschlechtes ist erforderlich" jika tombol kirim diklik dan tidak ada jenis kelamin yang dipilih. Bagaimana saya bisa mencapai ini dengan tombol? Saya pikir saya dapat mengubah status tombol radio 'disentuh' ketika Tombol Kirim ditekan, tetapi ini hanya mungkin dengan formulir reaktif, bukan? Saya agak bingung bagaimana memicu kesalahan nfIf untuk menunjukkan petunjuk, saat menekan tombol Kirim.

<form name="form" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()">
<div class="col-md-12">
  <div class="form-group col-md-4">
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
             autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
    </label>
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
             autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
    </label>
    <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && (selectedBy.dirty || selectedBy.touched)">Die Angabe eines Geschlechts ist erforderlich.
    </div>
  </div>

</div>
<button (click)="onSubmit()" type="submit" class="btn btn-primary">Weiter</button>

Terima kasih atas bantuan Anda.

0
Maximilian von Unwerth 30 Maret 2020, 01:17

1 menjawab

Jawaban Terbaik

Saya tidak terlalu terbiasa bekerja dengan formulir yang didorong oleh templat dan mungkin ada cara yang lebih baik untuk melakukan ini. Saya memang mengumpulkan stackblitz yang menghasilkan hasil yang Anda cari.

Pada dasarnya Anda akan menggunakan @ViewChild() untuk mengambil formulir template di file pendukung ts. Anda akan memiliki properti boolean untuk menentukan apakah formulir telah dikirimkan. Anda kemudian dapat mengaktifkan boolean itu dan memeriksa validitas formulir di onSubmit() Anda.

App.component.ts

export class AppComponent  {
  @ViewChild("f", { static: false })
  public form;

  public hasFormBeenSubmitted: boolean = false;
  public patient = {
    gender: ''
  }

  public onSubmit() {
    this.hasFormBeenSubmitted = true;

    // check for form validity
    if (this.form.invalid) {
      return;
    }

    console.log(this.patient);
  }
}

Kemudian di template Anda, Anda bisa memanggil onSubmit() saat formulir dikirimkan. Anda akan memeriksa nilai boolean dan kesalahan yang diperlukan dalam pesan peringatan kontrol formulir dengan *ngIf.

App.component.html

<form name="form" #f="ngForm" (ngSubmit)="onSubmit()">
  <div class="col-md-12">
    <div class="form-group col-md-4">
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
              autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
      </label>
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
              autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
      </label>
      <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && hasFormBeenSubmitted">Die Angabe eines Geschlechts ist erforderlich.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Weiter</button>
</form>

https://stackblitz.com/edit/angular-padcsk

2
Jason White 29 Maret 2020, 23:28