首页 文章

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

提问于
浏览 次
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 };
}
angular angular-material2 formgroups

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中轻松进行异步调用并推迟验证结果 .

    回复于

相关问题