Directive for validation the input value

Question

I created the directive for validating the input value. I need that on input some characters my input/form become ivalid. Here is my code, but it is not working.

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
            }
        };
    }
}

Thank you for your help. Have a nice day.

What is not working? What do you expect to happen? What actually happens? How do you use this class you've created? Please create an online demo on StackBlitz or Plunker. — Lazar Ljubenović
– Lazar Ljubenović, Commented Aug 27, 2017 at 8:33
why are you using a input just use [validator][ngModel] get the value from AbstractControl — Rahul Singh
– Rahul Singh, Commented Aug 27, 2017 at 8:34
It should validate the input and when the input is { or } the form should throw an error on trying to save. — SashaSemanyuk
– SashaSemanyuk, Commented Aug 27, 2017 at 8:48

Rahul Singh · Accepted Answer · 2017-08-27 09:04:13Z

1

Using [validator][ngModel] will do the trick in your case as you don't need to have an input for this directive

Like this

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);
  }

}

Add this directive to declarations array of Ngmodule ValidatorDirective,

The working example of the same link.

edited Aug 27, 2017 at 9:04

answered Aug 27, 2017 at 8:35

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SashaSemanyuk Over a year ago

Thank you for response. But it is not working as well. In the Angular 1.5 I used ctrl.$setValidity and ctrl.$parsers for it. But here I don't know how to configure this functionality

Rahul Singh Over a year ago

@SashaSemanyuk I have updated the answer with the changes and it works for me i tested the same .

SashaSemanyuk Over a year ago

it return me the object of the directive with valid: false. But i still can submit the form. What can it be?

Rahul Singh Over a year ago

once you get hold of that you can now validate the errors , if some thing is returned its error else not . THis proves it works if it returns you values

SashaSemanyuk Over a year ago

I suppose that the form validates the error automatically on getting this result. Am i wrong?

|

Collectives™ on Stack Overflow

Directive for validation the input value

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related