为什么我的表单在加载页面后立即验证所有默认值（未触摸的字段）？

Question

我们有一个关于Validators.required的使用或它对我们表单的理解的问题。

我们希望输入文本是必需的（Validators.required）。其默认值为空（''）。用户必须在其中放入一些文本。

问题是，当我们到达页面时，某些东西正在播放Validators.required。换句话说，输入文本已经是红色的，只要刷新页面就会被标记为无效。

例如，我们要做的就是在这里https://www.primefaces.org/primeng/#/validation，为了使字段'First Name *：'无效，我们必须关注字段，键入一些东西，擦除所有内容并松散焦点。

我们使用Angular 7和PrimeNG。如果我们从PrimeNG复制/过去源代码，我们就会遇到同样的问题。但是如果我们用Validators.pattern（'\ d {4}'）替换Validators.required，一切都运行正常：用户必须先在输入中放入一些东西，然后才会启动验证器。从this.fb.group（...）初始化后变得无效。

 ngOnInit(): void {
    this.myform = this.fb.group({
        'minBreak':  new FormControl('', Validators.required) 
    });
}


<div style="display: flex; width: 28em;">
    <span style="margin-right: 1em;">
            Min break
    </span>
    <input type="text" pInputText formControlName="minBreak" />
</div>

问题一旦完成

this.myform = this.fb.group({
            'minBreak':  new FormControl('', Validators.required) 
        });

，表单就会转到status = INVALID。我们希望它是有效的。

问题为什么我们的表单在初始化后变为无效？在默认值上运行验证器是否正常？如果是这样，为什么这里的例子https://www.primefaces.org/primeng/#/validation不是这样的？

在控制台中的Stackblitz https://stackblitz.com/edit/angular-pnyiy3，我们可以看到表单状态为INVALID。

谢谢你的帮助 ：）

NB对于那些使用JHipster的人，他们说

.ng-invalid:not(form) {border-left: 5px solid red;} 

在global.scss中。一旦删除，一切正常......

Answer 1

从angular doc，验证器需要非空值。

因此，即使存在错误，您也不必显示它，而是可以等待表单变脏并出现错误以显示此错误。

你可以在这里找到一个工作的复制品：https://stackblitz.com/edit/angular-a3vjbk

Answer 2

在显示任何错误或验证消息之前，您需要检查表单是否“脏”。

在您的代码示例中，您只是在HTML上呈现错误消息。您需要检查字段是否有效以及表单是否“脏”。您可以使用*ngIf directive执行此操作并将其放入span标记中。

检查您在问题中提到的website的validationdemo.html文件示例：

 <p-message severity="error" 
            [text]="Error"
    *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty">

userform.controls ['password']。有效检查你的字段密码是否有效userform.controls ['password']。脏检查你的字段是否“脏”。如果您在聚焦场地时单击，更改值或按任意键，您的字段将变脏。