Directive pour la validation de la valeur d'entrée

Question

J'ai créé la directive pour valider la valeur d'entrée. J'ai besoin de cela en entrée certains caractères ma entrée/formulaire deviennent ivalid. Voici mon code, mais cela ne fonctionne pas.

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

Merci pour votre aide. Passez une bonne journée.

Answer 1

L'utilisation [validator][ngModel] fera l'affaire dans votre cas que vous n'avez pas besoin d'avoir une entrée pour cette directive

Vous aimez cette

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

} 

Ajouter cette directive à un tableau declarations de NgmoduleValidatorDirective,

L'exemple de travail de la même link.