驗證輸入值的指令

我創建了用於驗證輸入值的指令。我需要輸入一些字符，我的輸入/表單變爲ivalid。這是我的代碼，但它不工作。驗證輸入值的指令

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

謝謝您的幫助。祝您有愉快的一天。

來源

2017-08-27 SashaSemanyuk

什麼不工作？你期望發生什麼？究竟發生了什麼？你如何使用你創建的這個類？請在StackBlitz或Plunker上創建一個在線演示。 –

爲什麼你使用輸入只是使用'[驗證器] [ngModel]'從'AbstractControl'獲取值 –

它應該驗證輸入，並且當輸入是{或}表單應該在嘗試保存時拋出錯誤。 – SashaSemanyuk

使用[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); 
    } 

}

這個指令添加到declarations陣列的NgmoduleValidatorDirective,

工作示例相同link。

來源

2017-08-27 08:35:40

謝謝你的迴應。但它並沒有起作用。在Angular 1.5中，我使用了'ctrl。$ setValidity'和'ctrl。$ parsers'。但在這裏，我不知道如何配置這個功能 – SashaSemanyuk

@SashaSemanyuk我已經更新了答案的變化，它適用於我我測試相同。 –

它以'valid：false'的形式返回指令的對象。但我仍然可以提交表格。它可能是什麼？ – SashaSemanyuk

驗證輸入值的指令

回答

相關問題