Question

我为一个简单的表单控件创建了一个非常简单的自定义验证器，例如MatInput，它总是返回非空值，例如无效的。我还添加了一个预先构建的验证器，例如必需的。当我启动我的应用程序时，我可以看到 status = INVALID 和 errors.required = true。

一旦我开始输入，我预计状态将保持 INVALID 和 errors.myError = true，但事实并非如此。我究竟做错了什么？我已经在 StackBlitz 上构建了我的示例。我还在下面的 TS 和 HTML 文件中添加了内容

TS

import { Component } from '@angular/core';
import { AbstractControl,  FormControl,  ValidationErrors,  ValidatorFn,  Validators} from '@angular/forms';

export function myValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
      return { "myError": true };
  };
}

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

export class AppComponent {
  name = new FormControl('', [Validators.required, myValidator]);
}

HTML

<label>
    Name:
    <input type="text" [formControl]="name">
</label>

{{ name | json }}

我对 Angular 很陌生，我不知道如何调试它。接下来我可以尝试什么？

Answer 1

TL;博士：

export class AppComponent {
  name = new FormControl('', [Validators.required, myValidator()]);
}

说明：

myValidator 没有被调用，所以你没有得到 ValidatorFn

角度反应形式的自定义验证器永远不会触发

1 个答案: