Question

我们在使用Validators.required或其对我们表格的理解方面存在问题。

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

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

例如，我们要在此处https://www.primefaces.org/primeng/#/validation进行操作，以使“名*：”字段无效，我们必须关注该字段，键入一些内容，擦除所有内容并失去焦点

我们使用Angular 7和PrimeNG。如果我们从PrimeNG复制/粘贴源代码，则会遇到同样的问题。但是，例如，如果我们替换Validators.pattern（'\ d {4}'）所需的Validators。，则一切正常：用户必须先在输入中放入一些内容，然后，Validators才起作用。从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) }); 完成后，表格转到状态=无效。我们希望它是有效的。

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

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

感谢您的帮助：）

NB 对于使用JHipster的用户，他们放

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

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

Answer 1

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

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

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

OrderController

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

Answer 2

在angular doc中，验证器要求一个非空值。

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

您可以在这里找到有效的副本：https://stackblitz.com/edit/angular-a3vjbk

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

2 个答案:

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