如何制作一个 angular 反应式表单字段，该字段使用 mat-error 在表单加载后立即显示验证错误？

Question

现在它加载了一个空白字段，如果我单击该字段并单击退出，则会显示验证错误。但我希望它在页面加载时显示。这是 HTML

  get fcnReqDesc() { return this.fgOrderForm.get('fcnReqDesc'); }

 <mat-error *ngIf="fcnReqDesc.errors" class="error">
   <span *ngIf="fcnReqDesc.errors.required"> Requisition Description is
    <strong>required</strong></span>
 </mat-error>

这是一个可以工作但不使用 mat-error

的版本

<p *ngIf="fcnReqDesc.invalid" class="error">
  <span> Requisition Description is <strong>required</strong></span>
</p>

我尝试了堆栈溢出的一些想法，但它们不起作用

 // setTimeout(() => {
    //   this.fgOrderForm.patchValue({
    //     fcnReqDesc: ''
    //   });
    // })

    // this.fgOrderForm.get('fcnReqDesc').setValidators([Validators.required]);

Answer 1

表单组初始化markAllAsTouched后放入ngOnInit

示例：

this.form = this.formBulder.group({...})
this.form.markAllAsTouched()

这会将所有控件标记为已触摸并显示验证错误

如何制作一个 angular 反应式表单字段，该字段使用 mat-error 在表单加载后立即显示验证错误？

How do I make a angular reactive form field that uses mat-error to show validation error as soon form is loaded?

angular

angular-reactive-forms