原始时所需的反应形式控制无效

时间:2019-02-07 16:06:07

标签: angular angular-validation

我有一个带有验证器的角反应形式(取自该方案,但根据需要进行引用)。初始化表单时,控件仍处于初始状态,但仍原始未触摸不脏。 是否有任何假设为什么会发生\如何避免呢?

2 个答案:

答案 0 :(得分:0)

使用,例如

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">
...
</div>

来自official docs

  

为什么检查脏东西并摸了摸?   您可能不希望您的应用程序在用户有机会编辑表单之前显示错误。在用户执行以下两项操作之一之前,检查是否脏污和是否被触摸可防止显示错误:更改值,将控件变脏;或模糊表单控件元素,将控件设置为“触摸”。

答案 1 :(得分:0)

所有必需的表单控件,都在表单中将其标记为必需,如下所示

  createFormGroup() {
  return new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    mobile: new FormControl('', [Validators.required]),
    country: new FormControl('', [Validators.required])
  });
}

因此,在上述表单控制电子邮件中,手机和国家/地区无效,因此用户将禁用“提交”按钮或向用户显示一些消息

因此,当用户触摸以下字段时,您可以在此处显示

  <input formControlName="mobile">
  <span *ngIf="mobile.invalid && mobile.errors.required">
    Mobile is required.
  </span>
  <span *ngIf="mobile.invalid && mobile.errors.invalidNumber">
    Value has to be a number.
  </span>

希望这会有所帮助。