如何在Angular 8中显示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>

这是我的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

尝试一下：

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>