时间戳

首页 > 解决方案 > Angular 反应表单单个字段验证

html - Angular 反应表单单个字段验证

问题描述

在 Angular 中验证反应式表单时，我希望在输入无效数据时在无效字段下显示错误消息。

<form  (ngSubmit)=sendQuery() [formGroup]="form">
  <div *ngFor='let key of modelKeys'>
    {{key}}
    <input name="query" placeholder="Enter {{key}} Here" formControlName="{{key}}" />
    <div *ngIf="(!key.untouched) || !(key.pristine) && !key.valid">
        Enter valid {{key}} detail
    </div>
  </div>
  <button type="submit" [disabled]='!form.valid'>Submit</button>
</form>

即使该字段有效，我总是会为所有字段显示错误消息。为什么数据有效时显示的条件总是为真？

输出

在此处输入图像描述

环境：Angular CLI：7.1.3，rxjs 6.3.3，打字稿3.1.1

标签： htmlangularformstypescriptreactive

解决方案

您的代码的问题在这里：

<div *ngIf="(!key.untouched) || !(key.pristine) && !key.valid">
  Enter valid {{key}} detail
</div>

key只是数据的（字符串？）键，而您将其用作FormControl对象，这显然不起作用。要使用 , 之类的属性，untouched您需要参考.pristinevalidFormControl

这是一个快速堆栈闪电战，展示了如何解决这个问题。

另外我认为你的验证并没有真正按照它目前的实现方式工作，在stackblitz中我只实现了一个虚拟验证来检查字符串的长度，但它展示了它是如何工作的（只显示字段的错误消息是实际上无效，例如长度为0）。

关于您的问题，为什么您的错误消息总是显示，这是因为如果是字符串，条件(!key.untouched) || !(key.pristine) && !key.valid将始终评估为 true 。将评估为，将其变为，这将成为真的。key'myKey'.untouchedundefined!undefined

推荐阅读