我的自定义验证器不工作，反应式表单Angular 6

Question

我正在尝试验证一个输入，该输入检查我正在注册的文章是否存在。。。所以…我有一个方法来检查我的数据库，然后我在一个变量中设置一个布尔值。

然后我把这个变量传递给验证器。。。但有些东西不起作用。

验证函数：

validateRef(controlref: boolean): ValidatorFn {
return () => {
if ( controlref == true  ) {
return { 'validref': true };
} 
if (controlref == false) {
return { 'validref': false}
}
};

我的表格：

constructor( private fb: FormBuilder ) {
this.createForm();
}
createForm() {
this.dataForm = this.fb.group({
ref: ['', [Validators.required, this.validateRef(this.controlref)]],
})
}
}

我传递给函数的变量，我已经检查过了，正在工作。。。但是this.data.controls.ref.errors始终为空。

这里STACKBLITZ

你们能指导我吗？谢谢

Answer 1

HTML

演示

<form [formGroup]="dataForm">
<input placeholder="Enter Something" formControlName="ref">
<div *ngIf="dataForm.get('ref').hasError('invalidRef')">
the data is not entered
</div>
</form>

组件：

ngOnInit() {
this.dataForm = this.fb.group({
ref: ['', [Validators.required, CustomvalidatorService.validateRef]],
})
}

customizedvalidator.service.ts:

import { Injectable } from '@angular/core';
import { AbstractControl, FormControl } from '@angular/forms';

@Injectable()
export class CustomvalidatorService {
constructor() { }
static validateRef(control: FormControl) {
if (!control.value) {
return { 'invalidRef': true };
} else {
return null;
}
}
}