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

Question

我们对 Validators.required 的使用或其对我们表单的理解有疑问。

我们希望输入文本是强制性的 (Validators.required)。它的默认值为空 ('')。用户必须在其中输入一些文本。

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

例如，我们在这里 https://www.primefaces.org/primeng/#/validation 要做的，为了使字段 'First Name *:' 无效，我们必须聚焦该字段，输入一些东西，擦除所有内容并松开重点.

我们使用 Angular 7 和 PrimeNG。如果我们 copy/past 来自 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) }); 完成后，表单转到状态 = 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

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

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

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

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

userform.controls['password'].valid 检查您的字段密码是否有效 userform.controls['password'].dirty 检查您的字段是否为 "dirty"。如果您在聚焦字段时单击、更改值或按任意键，您的字段就会变脏。

Answer 2

从 angular doc 开始，验证器需要一个非空值。

所以即使有错误你也不必显示它，而是可以等待表单变脏并有错误来显示这个错误。

您可以在此处找到工作重现：https://stackblitz.com/edit/angular-a3vjbk

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

Why does my form validate all default value (untouched field) as soon as the page is loaded?

validation

typescript

jhipster

angular

angular-reactive-forms

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