Angular 反应式表单验证器最初显示错误消息？

Question

我有一个反应式表单验证器样本。它最初在我们输入值之前显示验证错误消息。

预期的行为是，在输入值后必须显示错误消息

Answer 1

你必须像这样检查 touched 错误消息

 <div *ngIf="check.errors.required && check.touched" class="e-error">
                This field is required.
 </div>

当您加载表单时，您正在简单地检查必填项，然后您的字段显然是空的，因此它会抛出错误。

您将在此处获得更多信息和示例：Built In Validators and Reactive Form Validattions

Answer 2

创建一个表单服务并使用标记 FormGroup Touched 这样它将默认不显示错误消息

import { FormService } from './services/form';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})

export class AppComponent  {
 public testForm: FormGroup;

ngOnInIt(){
 this.testForm.valueChanges.subscribe((data) => {
    this.FormService.markFormGroupTouched(this.testForm);
})
}
}

Angular 反应式表单验证器最初显示错误消息？

Angular reactive form validator is showing error message initially?

validation

typescript

angular

angular-reactive-forms