2016-05-04 11 views
2

正規表現パターンでパスワードフィールドを検証する方法formbuilderを使用せずにangular2を使用する。angle2を使用して正規表現で入力フィールドを検証する

入力フィールドのmaxlengthとminlengthを検証できますが、正規表現による次の検証は機能しません。

私は次のように試してみましたが、それはあなたがValidators.patternバリデータをラップ/適用するカスタムディレクティブを実装する必要が

<ion-item> 
    <ion-icon name="lock" item-left class="placeholder-icon"></ion-icon> 
    <ion-label floating primary>Password</ion-label> 
    <ion-input [(ngModel)]="login.password" 
     ngControl="password" type="password" #password="ngForm" 
     pattern="/^.*(?=.{6,})(?=.*d)(?=.*[A-Z])(?=.*[a-z])(?=.*[[email protected]#$%^&*? ]).*$/"> 
    </ion-input> 
</ion-item>   
<p *ngIf="password.errors && password.errors.pattern" danger padding-left> 
    Password must contain one lowercase, one uppercase, one number, one 
    unique character such as [email protected]#$%^&? and be at least 6 characters long. 
</p> 
+0

またはhttp://stackoverflow.com/questions/32314567/email-input-pattern-attribute –

答えて

0

が機能していません。ここで

は、このアプローチの実装です:

const PATTERN_VALIDATOR = 
    new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => PatternValidator), multi: true}); 

@Directive({ 
    selector: '[pattern][ngControl],[pattern][ngFormControl],[pattern][ngModel]', 
    providers: [PATTERN_VALIDATOR] 
}) 
export class PatternValidator implements Validator { 
    private _validator: Function; 

    constructor(@Attribute("pattern") pattern: string) { 
    this._validator = Validators.pattern(pattern); 
    } 

    validate(c: Control): {[key: string]: any} { return this._validator(c); } 
} 

あなたは、このディレクティブをこのように使用することができます。

@Component({ 
    template: ` 
    (...) 
    <ion-input [(ngModel)]="login.password" ngControl="password" 
      type="password" #password="ngForm" 
      pattern="/^.*(?=.{6,})(?=.*d)(?=.*[A-Z])(?=.*[a-z])(?=.*[[email protected]#$%^&*? ]).*$/"> 
    </ion-input> 
    (...) 
    `, 
    directives: [ PatternValidator ] 
}) 

この記事では、興味を起こさできます

関連する問題