Question

我还在学习Angular 2+和Material2，所以如果你能在回复中加入一些代码片段，我会很感激。

我正在尝试创建一个使用Angular组件中的布尔值的表单验证器。布尔值是从查询我的数据库的函数设置的，如果提交的ID是唯一的，则返回true。

但是，我无法弄清楚如何让验证器读取该布尔值。我也不太确定如何处理自定义验证器，似乎没有关于此的文档。

以下是一些代码：

checkResult: boolean;

constructor(private http: HttpClient, private formBuilder: FormBuilder) {

  this.form = this.formBuilder.group({
    id: ['', Validators.required],
    configuration: this.formBuilder.array([])
  });
}


// Triggered when record is selected from table

viewRecord() {

  this.form = this.formBuilder.group({
    id: [formId, Validators.required, {validator: this.checkIdFn()}],
    configuration: this.formBuilder.array([])
  });
}

checkID(): boolean {
  //queries database
  result: boolean
  this.checkResult = result
}

checkIdFn = (control: FormGroup) => {
  return this.checkResult ? null : { valid: false };
}

Answer 1

id: [formId, [array of validators: Validators.required, MyValidator.something]],

MyValidator.something需要是一个函数(control: AbstractControl) -> ValidationErrors | null

MyValidator.something可以是你的类函数，但是如果你创建了一个返回这个验证器的函数会更好(any) -> ValidatorFn

例如：

checkResult: boolean;

constructor(private http: HttpClient, private formBuilder: FormBuilder) {

  this.form = this.formBuilder.group({
    id: ['', [Validators.required, this._myValidator()]],
    configuration: this.formBuilder.array([])
  });
}

private _myValidator(): ValidatorFn {
  return (control: AbstractControl) => {
    return control.value && this.checkResult ? {error: 'error'} : null;
  }
}

您可以在ValidatorFn中轻松进行异步调用并推迟验证结果。

使用外部数据创建自定义formGroup验证程序

1 个答案: