Как отобразить ошибку FormGroup в Angular 8

У меня есть текстовая область, которая требуется и требует не менее 10 символов. Если пользователь нажимает кнопку и эти критерии равны true, я хотел бы отобразить сообщение об ошибке.

Вот мой HTML-код:

<form [formGroup]="formGrp" (submit)="onSubmit()">
  <div class="input-field input-field--multiline">
    <textarea 
      rows="2"
      [formControl]="requestAccessMessageCtrl"
      [attr.placeholder]="Your message">
    </textarea>
    <!--add error message here-->
  </div>
  <div class="button-group button-group--responsive request__btn">
    <button class="button button--primary" type="submit">Send</button>
  </div>
</form>

А вот мой TypeScript:

readonly requestAccessMessageCtrl = new FormControl(null, {
    validators: [Validators.required, Validators.minLength(10)],
  })
readonly formGrp = new FormGroup({ message: this.requestAccessMessageCtrl })

onSubmit() {
  if (this.requestAccessMessageCtrl.invalid) {
    return;
  }
  this.userService.postActivity(
    this.requestAccessMessageCtrl.value,
  )
}

Что мне нужно добавить для отображения двух сообщений об ошибках:

  1. "Поле ввода обязательно"
  2. "Введите не менее 10 символов"

Я хотел бы отображать ошибки только в том случае, если пользователь нажал кнопку отправки.


angular validation forms formgroups
person macintosh    schedule 11.10.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Попробуй это:

public isSubmitted;

и внутри вашей функции submit() установите для этой переменной значение true. а затем в своем html добавьте его в свои условия.

<div class="text-danger" *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength ">
      <small>Need at least 10 characters</small>
</div>

<div class="text-danger" *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required">
           <small>Field is required</small>
</div>
person Nadhir Falta    schedule 11.10.2019
comment
Это работает, но не так, как мне нравится. Должен отображаться только тогда, когда пользователь нажимает кнопку. Если текстовая область пуста, поле обязательно должно появиться, когда пользователь нажимает кнопку - person macintosh; 11.10.2019
comment
объявите некоторый флаг, скажем, isSubmitted в файле ts и установите для него значение true в функции отправки. Затем используйте такое условие, как *ngIf=requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required && isSubmitted - person Shikha; 11.10.2019
comment
@macintosh, как сказал Шиха, просто добавьте туда переменную и установите для функции отправки значение true. см. мой обновленный ответ - person Nadhir Falta; 11.10.2019
comment
здорово, что работает! Можно ли изменить цвет границы текстовой области на красный, если появляется ошибка? - person macintosh; 11.10.2019
comment
да. Добавьте некоторый класс со свойством border:red, используя директиву ngclass, указав то же условие *ngIf - person Shikha; 11.10.2019
comment
@Shikha, не могли бы вы опубликовать пример? - person macintosh; 11.10.2019

arrow_upward
0
arrow_downward

Добавьте ниже в файл css

.invalid {
    border-color: red;
    }

Добавьте приведенный ниже код в файл ts

<div class="input-field input-field--multiline">
        <textarea rows="2"
            [ngClass]="{'invalid':isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength}"
            [formControl]="requestAccessMessageCtrl" [attr.placeholder]="Your message">
                    </textarea>
<div class="text-danger"
            *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength ">
            <small>Need at least 10 characters</small>
</div>
<div class="text-danger"
            *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required">
            <small>Field is required</small>
 </div></div>
<div class="button-group button-group--responsive request__btn">
    <button class="button button--primary" type="submit">Send</button>
</div>
person Shikha    schedule 11.10.2019
comment
наверняка я добавил его в файл .css - person macintosh; 11.10.2019
comment
Мне пришлось заменить оператор && на оператор || - person macintosh; 11.10.2019

arrow_upward
0
arrow_downward

пожалуйста, найдите код ниже-

HTML-

    <form [formGroup]="formGrp">
    <div class="input-field input-field--multiline">
        <textarea
      rows="2"
      formControlName="message"
      >
    </textarea>
        <div *ngIf="showError">
            <span *ngIf="formGrp.get('message').errors?.required">Input field is required</span>
            <span *ngIf="formGrp.get('message').errors?.minlength">Type at least 10 characters</span>
        </div>
        <!--add error message here-->
    </div>
    <div class="button-group button-group--responsive request__btn">
        <button class="button button--primary" (click)="onSubmit()"type="submit">Send</button>
    </div>
</form>

а в компоненте-

showError = false;
    onSubmit() {
    if (this.requestAccessMessageCtrl.invalid) {
      this.showError = true;
      return;
  }
    this.showError = false;
}

Вот демонстрация stackblitz

person Anand Bhushan    schedule 12.10.2019