角反应形式单个字段验证

Question

在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

Answer 1

您的代码存在问题：

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

key只是数据的（string？）键，您将其用作FormControl对象，这显然不起作用。要使用untouched，pristine和valid之类的属性，您需要引用FormControl。

Here是一个快速的堆叠闪电战，展示了如何解决此问题。

我还认为您的验证无法真正实现当前的实现方式，在stackblitz中，我仅实现了一个虚拟验证，该验证可以检查字符串的长度，但可以展示其工作方式（仅显示错误消息）。字段实际上是无效的，例如长度为0）。

关于您的错误消息为何始终显示的问题，这是因为如果(!key.untouched) || !(key.pristine) && !key.valid是字符串，则条件key将始终为true。 'myKey'.untouched的计算结果为undefined，将其转换为!undefined，然后变为true。