我的自定义验证器不起作用,反应式Angular 6

时间:2018-08-06 04:42:08

标签: angular angular-reactive-forms angular-validation

我正在尝试验证输入,以检查我正在注册的文章是否存在...所以...我有一种方法可以检查数据库,然后在变量中设置一个布尔值。< / p>

然后我将此变量传递给验证器...但是有些东西不起作用。

验证功能:

   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

你们可以用这个指导我吗?谢谢

1 个答案:

答案 0 :(得分:0)

HTML

DEMO

<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]],
    })
  }

custom-validator.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;
    }
  }

}