Angular 如何将自定义验证器添加到离子2中的离子输入？例如，检查最小/最大值

我正在创建一个基于Angular2-Ionic2 TypeScript的应用程序，但ion输入有一个问题，它似乎无法像常规输入那样识别最小、最大验证器属性。 我可能需要创建的其他验证器将是一个重复验证器和一个整数验证器。

---

简而言之，我需要一个创建一组健壮的验证器的想法。

将离子输入的类型更改为“tel”，您将能够使用minlength和maxlength

例如：

        <ion-label stacked>Nombre para la tarjeta</ion-label>
        <ion-input type="tel" name="name" minlength="1" maxlength="11"
                   required [(ngModel)]="card.name">
        </ion-input>

名称为tarjeta

下面给出的代码是angular2中的自定义电子邮件验证指令。希望它能帮助你

import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[validateEmail]',
  providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => ValidateEmail), multi: true }]
})
export class ValidateEmail implements Validator {

  constructor() { }

  validate(c: AbstractControl): { [key: string]: any } {
    let EMAIL_REGEXP =  /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;

    if (!c.value) return null;
    return EMAIL_REGEXP.test(c.value) ? null : {
      validEmail: true
    };
  }
}

---

第一种方法非常好，我认为这对我来说是最好的，因为我有4个验证器，可以通过将它们封装在一个我命名为CustomValidators的类中来引用它们

import { Directive, Input } from '@angular/core';

import { FormControl, Validator, AbstractControl } from '@angular/forms';

export class CustomValidators {
    static duplicates(existing: string[]) {
        return (control: FormControl) => {

           let valid = existing.map(s => s.toLowerCase().trim())
              .indexOf(control.value.toLowerCase().trim()) === -1

           return valid ? null : {
               duplicates: {
                   valid: false
             }
         }
     }
 }
  static min(min: number) {
    return (control: FormControl) => {
        console.log('min' + (parseInt(control.value) >= min));
        let valid =  parseInt(control.value) >= min;

        return valid ? null : {
            min: {
                valid: false
            }
        }
    }
}
  static max(max: number) {
    return (control: FormControl) => {
        console.log('max' + (parseInt(control.value) <= max));

        let valid = parseInt(control.value) <= max;

        return valid ? null : {
            max: {
                valid: false
            }
        }
    }
}
  static wholeNumber(control: FormControl) {
    console.log('wholeNumber' + (parseFloat(control.value) % 1 === 0));
      let valid =  parseFloat(control.value) % 1 === 0;
      return valid ? null : {
          wholeNumber: {
            valid: false
       }
     }
   }
}

第二种方法是单独创建一个类，当您没有很多验证器时，这可能很容易做到，否则您必须为每个验证器创建一堆类

@Directive({ selector: '[validateDuplicates]' }) 
class ValidateDuplicates implements Validator {
   @Input('validateDuplicates') existing: string[];

    validate(control: FormControl): { [key: string]: any; } { 

        let valid = this.existing.map(s => s.toLowerCase().trim())
           .indexOf(control.value.toLowerCase().trim()) === -1;

       return valid ? null : {
            duplicates: {
               valid: false
            }
       }
   }
}

@Directive({ selector: '[validateDuplicates]' }) 
class ValidateDuplicates implements Validator {
   @Input('validateDuplicates') existing: string[];

    validate(control: FormControl): { [key: string]: any; } { 

        let valid = this.existing.map(s => s.toLowerCase().trim())
           .indexOf(control.value.toLowerCase().trim()) === -1;

       return valid ? null : {
            duplicates: {
               valid: false
            }
       }
   }
}