Angular8中如何显示FormGroup错误

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>

这是我的打字稿：

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

我必须添加什么才能显示两条错误消息：

"Input field is required"
"Type at least 10 characters"

我只想在用户按下提交按钮时显示错误。

Answer 1

试试这个：

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>

Answer 2

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

请找到下面的代码-

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 demo

Angular8中如何显示FormGroup错误

How to display FormGroup error in Angular 8

forms

validation

angular

formgroups