Angular 12 Form 验证器是加载页面上的验证答案

【问题标题】：Angular12 Form validator is validating on load pageAngular 12 Form 验证器是加载页面上的验证
【发布时间】：2021-12-29 11:13:09
【问题描述】：

我已经搜索了所有社区，但没有找到任何解决方案。

在步进器内部有一个有角度的表格。问题是当页面加载时，表单在启动时进行验证，使输入变为红色，如下所示：

Image Form

如何防止这种情况发生？我已经尝试过 markAsPristine 和其他人，但是，什么都没有......

这是初始化表单时的 .TS 部分（从 ngOnInit 调用）：

this.professionalDataForm = this.formBuilder.group({
  professionalRUT: this.formBuilder.control({value:'', disabled: false},[Validators.required]),
  professionalName: this.formBuilder.control({value:'', disabled: false}),
  address: this.formBuilder.control({value:'', disabled: false}),
  commune: this.formBuilder.control({value:'', disabled: false}),
  email: this.formBuilder.control({value:'', disabled: false})
});

这里是 .html

<form [formGroup]="professionalDataForm">
<div class="row">
<mat-form-field class="col-md-4" appearance="outline">
  <mat-label>Rut del profesional</mat-label>
  <input matInput formControlName="professionalRUT" >
<mat-error class="line-broken-tooltip">
   adsf
  </mat-error> 
</mat-form-field>

谢谢...

【问题讨论】：

标签： angular forms validation

【解决方案1】：

我认为它不会立即验证，只是您需要控制何时应显示mat-error。查看the example for the mat-form-field，您的问题可以通过简单的ngIf 来解决。

<mat-form-field class="col-md-4" appearance="outline">
  <mat-label>Rut del profesional</mat-label>
  <input matInput formControlName="professionalRUT" >
  <mat-error class="line-broken-tooltip" *ngIf="professionalDataForm.controls?.professionalRUT?.invalid">
   adsf
  </mat-error> 
</mat-form-field>

【讨论】：

我明白你的意思，但是，问题不在于是否显示 mat-error，因为如果我删除标签，无论如何都要使输入的边框变成红色，我放了 de *ngIf... 并显示，因为当页面加载使控件无效时，我不知道为什么
通常只有当字段也是touched时才会发生这种情况。检查哪段代码可以使输入被触摸并从那里开始。