Показывать ошибку проверки для радиобоксов, если при нажатии Отправить в Angular флажок не установлен - PullRequest
Новая
       49

Показывать ошибку проверки для радиобоксов, если при нажатии Отправить в Angular флажок не установлен

0 голосов
/ 30 марта 2020

В этом примере я хочу получить подсказку "D ie Angabe eines Geschlechtes ist erforderlich", если нажата кнопка отправки и не выбран пол. Как я могу достичь этого с помощью кнопки? Я думал, что смогу изменить состояние «касания» переключателей, когда нажата кнопка «Отправить», но это возможно только с реактивными формами, не так ли? Я немного запутался в том, как вызвать ошибку nfIf для отображения подсказки при нажатии кнопки «Отправить». 

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

Спасибо за вашу помощь.

1 Ответ

1 голос
/ 30 марта 2020

Я не очень знаком с работой с шаблонно-управляемыми формами, и, вероятно, есть лучший способ сделать это Я собрал стек-блиц, который дает искомый результат.

По сути, вы собираетесь использовать @ViewChild(), чтобы получить шаблон в файле поддержки ts. У вас будет свойство boolean, чтобы определить, была ли отправлена ​​форма. Затем вы можете переключить это логическое значение и проверить правильность формы в вашем onSubmit().

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

Затем в вашем шаблоне вы можете просто вызвать onSubmit(), когда Форма отправлена. Вы проверите значение boolean и требуемую ошибку в своем предупреждающем сообщении управления формой с помощью *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

...