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

Question

У меня есть текстовая область, которая требуется и должна содержать не менее 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 символов»

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

Answer 1

Добавить ниже в файле 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>

Answer 2

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

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

Answer 3

Попробуйте:

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>