角度形式在使用 ng-zorro 初始化时未显示错误

Question

我有一个带有反应式形式的角度应用程序。我使用ng-zorro作为UI框架。有一种情况是，客户可以打开一个表单，该表单在应用程序中的工作流程中变得无效。

问题是 angular 将表单标记为无效，但在触摸表单控件之前，ng-zorro 不会显示错误消息。

function validateEmail(c: FormControl) {
const URL_REGEX = /^(?:http(s)?://)?[w.-]+(?:.[w.-]+)+[w-._~:/?#[]@!$&'()*+,;=.]+$/;
return URL_REGEX.test(c.value) ? null : {
validateEmail: true
};
}
<nz-form-item>
<nz-form-label
nzXXl="3"
nzXl="4"
nzLg="6"
nzMd="7"
nzSm="10"
nzXs="24"
nzFor="videoLink"
nzRequired>
Video Link
</nz-form-label>
<nz-form-control
nzXXl="21"
nzXl="20"
nzLg="18"
nzMd="17"
nzSm="14"
nzXs="24"
nzHasFeedback
[nzErrorTip]="videoErrorTpl"
>
<input nz-input formControlName="videoLink" maxlength="150"/>
<ng-template #videoErrorTpl let-control>
<ng-container *ngIf="control.hasError('required')">
required
</ng-container>
<ng-container *ngIf="control.hasError('validateEmail')">
Please enter a valid URL
</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>

Answer 1

如果我正确理解了这个问题，它的根源是所有字段都被标记为原始字段。如果需要在启动表单组件后立即显示错误，请尝试将所有字段的状态设置为脏。 例如：

ngOnInit(): void {
for (const key in this.validateForm.controls) {
this.validateForm.controls[key].markAsDirty();
this.validateForm.controls[key].updateValueAndValidity();
}
} 

其中验证表单是表单的模型