角反应形式单个字段验证

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 。

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

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

关于您的问题为何始终显示错误消息的问题，这是因为条件(!key.untouched) || !(key.pristine) && !key.valid 如果key是一个字符串， (!key.untouched) || !(key.pristine) && !key.valid将始终取值为true。 'myKey'.untouched将计算为undefined ，这将使其变成!undefined ，这将成为true。