如何在 Angular 8 中显示 FormGroup 错误答案

【问题标题】：How to display FormGroup error in Angular 8如何在 Angular 8 中显示 FormGroup 错误
【发布时间】：2020-02-09 00:33:44
【问题描述】：

我有一个 textarea，它是必需的，至少需要 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,
  )
}

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

“必填项”
“至少输入 10 个字符”

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

【问题讨论】：

标签： angular forms validation formgroups

【解决方案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>

【讨论】：

它可以工作，但不是我喜欢的那种方式。应该只在用户按下按钮时显示。如果 textarea 为空，则当用户单击按钮时应出现“必填字段”
在 ts 文件中声明一些标志说 isSubmitted 并在提交函数上将其设置为 true。然后使用 *ngIf="requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required && isSubmitted " 这样的条件
@macintosh 正如 Shikha 所说，只需在其中添加一个变量，并将其在提交功能上设置为 true。查看我的更新答案
太棒了！如果出现错误，是否可以将textarea边框颜色更改为红色？
是的。添加一些具有属性边框的类：red 使用 ngclass 指令指定相同的 *ngIf 条件

【解决方案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>

【讨论】：

我确实在 .css 文件中添加了它
我不得不将 && 运算符替换为 || 运算符

【解决方案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

【讨论】：