验证输入值的指令

Question

我创建了验证输入值的指令。我需要在输入一些字符时我的 input/form 变得有效。这是我的代码，但它不起作用。

import {Directive, Input} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors} from '@angular/forms';

const regExp = new RegExp('(>|<)+');

@Directive({
    selector: '[validator]',
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: ValidatorDirective,
        multi: true
    }]
})

export class ValidatorDirective {
    @Input('validator') input;

    constructor() {

    }

    validate (control: AbstractControl): ValidationErrors {
        const value = control.value;
        const isValid = regExp.test(value);

        return isValid ? null : {
            validator: {
                valid: false
            }
        };
    }
}

感谢您的帮助。祝你有个愉快的一天。

Answer 1

使用 [validator][ngModel] 可以解决您的问题，因为您不需要为此指令输入

像这样

import {AbstractControl, ValidatorFn, Validator, FormControl, NG_VALIDATORS} from "@angular/forms";
import {Directive} from '@angular/core';


const regExp = new RegExp('(>|<)+');
function validateregex(): ValidatorFn {
  return (c : AbstractControl) => {

    const isValid = regExp.test(c.value);
    console.log("Valid"+isValid);
    //let isValid = c.value === 'Rahul';
    if(isValid){
      return null;
    }else{
      return {
        validator: {
          valid: false
        }
      };
    }

  }
}

@Directive({
  selector: '[regex][ngModel]',
  providers: [{
    provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true
  }]
})

export class ValidatorDirective implements Validator{

  validator: ValidatorFn;

  constructor() {
    this.validator = validateregex();
  }

  validate(c: FormControl) {
    return this.validator(c);
  }

}

将此指令添加到 Ngmodule ValidatorDirective,

的 declarations 数组

相同的工作示例link。

验证输入值的指令

Directive for validation the input value

angular

angular-forms