javascript - 如何以 Angular 正确设置表单验证

Question

使用 Angular 版本 11.1.2
因此，在我的项目中，有一个简单的输入字段，在重定向到新页面之前使用 Angular Material 输入名称，以下是我在表单控件中设置的一些验证器:

需要

最小长度为 5

最大长度为 25

在检查所有上述验证器之后；通过 api 请求在( /api/check/:name )它返回真(如果名称已经存在)和假(如果名称不存在)--(这个目前没有在代码中实现，我认为必须使用自定义异步验证器)

我也设置了 自动对焦 在输入字段上；加载组件后，焦点将直接转到此输入字段。另外，为了显示用户名是否有效，有一些 mat-icon 作为 matSuffix ✔ for valid username和 ❌ for invalid form input ，还有 mat-progress-spinner用于显示异步验证器正在工作。
这是我的 component.html:

<mat-form-field appearance="outline" [ngStyle]="{ 'display': 'inline', 'font-size': '11pt' }">
  <mat-label class="inut-label">Enter your Username</mat-label>
  <input type="text" matInput placeholder="Eg: John123, Robo@123" [formControl]="username" autocomplete="off" autofocus required>

  <div class="form-condition" matSuffix>
    <mat-progress-spinner *ngIf="showSpinner" diameter="24" mode="indeterminate" color="accent"></mat-progress-spinner>

    <!-- form is incorrect icon -->
    <mat-icon *ngIf="username.invalid && !showSpinner" color="warn">clear</mat-icon>

    <!-- form is correct icon -->
    <mat-icon *ngIf="username.valid && !showSpinner" [ngStyle]="{ 'color': 'green' }">done</mat-icon>
  </div>

  <mat-error *ngIf="username.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

<button mat-raised-button color="primary" *ngIf="username.valid" class="form-login" (click)="navigateToUserWindow()">
   <mat-icon>login</mat-icon>
   <span>&nbsp;Login</span>
</button>

组件.ts:

export class HomeComponent implements OnInit {
  username = new FormControl(null, [
    Validators.required,
    Validators.minLength(5),
    Validators.maxLength(25)
  ]);

  showSpinner = false;

  constructor(private route: Router) {}

  ngOnInit(): void {
    this.username.markAsPristine();
  }

  getErrorMessage(): string {
    if (this.username.hasError('required') && this.username.dirty) {
      return 'You cannot leave the username empty!';
    } else if (this.username.hasError('minlength') && this.username.dirty) {
      return 'Username must be at least 5 letters long!';
    } else if (this.username.hasError('maxlength') && this.username.dirty) {
      return 'Username must be atmost of 25 letters long!';
    }

    return '';
  }

  navigateToUserWindow(): void {
    this.route.navigate(['user']);
  }

}

这是屏幕截图

因为，登录按钮仅在表单有效时才会出现。我希望以下事情起作用:

在组件初始化上，因为自动对焦工作我想隐藏 ❌ 图标。

如果在内部输入时调用验证器，则显示错误消息以及表示有效或无效的相应图标。因为，我看过一些示例，这些验证器仅在用户将焦点移到输入之外时才显示错误。

我想一次显示一个图标，因此如果异步验证器忙于在完成时显示微调器，则显示表单是有效还是无效。

假设在自动对焦用户输入正确的用户名值后首次输入时出现主要问题，然后由于某种原因调用验证器，这仅通过 ❌ 切换反射(reflect)，但没有显示适当的消息(这仅发生在用户移开对错误的关注然后再次键入，则只有错误消息动态更改)。目前，我对这些属性(如脏、触摸、未触及、原始等)以及如何根据此特定用例正确使用它们感到有些困惑。

Answer 1

首先是对每个属性的解释:

有效:如果所有验证器都有效，则为真

无效:如果一个验证器无效则为真

脏:一旦您的 FormControl 值更改，就会变为真

Pristine:只要你的 FormControl 值没有被改变就会为真

触摸:一旦您的元素失去焦点(类似于 onBlur)，就会变为真(类似于 onBlur)

untouched:只要你的元素没有被触及就会为真

待处理:用于异步验证

以下是有关异步验证的更多信息 Form Validation - Creating asynchronous validators
在进行自定义验证时，我喜欢使用 invalid 和 touch。如果我是你，这就是我会使用的:

<mat-progress-spinner *ngIf="username.pending && username.touched" diameter="24" mode="indeterminate" color="accent"></mat-progress-spinner>
<mat-icon *ngIf="username.invalid && username.touched && !username.pending" color="warn">clear</mat-icon>
<mat-icon *ngIf="username.valid && username.touched && !username.pending" [ngStyle]="{ 'color': 'green' }">done</mat-icon>