0

我仍在学习 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 };
}
4

1 回答 1

0 
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 中进行异步调用并延迟验证结果。

于 2018-01-30T20:19:03.777 回答