使用 angular2 使用正则表达式模式验证输入字段答案

【问题标题】：Validate input field with regex pattern using angular2使用 angular2 使用正则表达式模式验证输入字段
【发布时间】：2016-10-13 21:19:33
【问题描述】：

如何在不使用表单生成器的情况下使用 regex 模式 使用 angular2 验证密码字段。

我能够验证输入字段的最大长度和最小长度，但以下使用正则表达式的验证不起作用。

我尝试了以下方法，但它不起作用

<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])(?=.*[!@#$%^&*? ]).*$/">
    </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 !@#$%^&? and be at least 6 characters long.
</p>

【问题讨论】：

或stackoverflow.com/questions/32314567/…

标签： angular ionic2

【解决方案1】：

您需要实现一个自定义指令来应用/包装Validators.pattern 验证器。

这是这种方法的一个实现：

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])(?=.*[!@#$%^&*? ]).*$/">
    </ion-input>
    (...)
  `,
  directives: [ PatternValidator ]
})

您可能会对这篇文章感兴趣：

https://medium.com/@ttemplier/implementing-custom-validator-for-template-driven-forms-292eb355447c#.xjjznv3z3

【讨论】：