Question

我正在创建一个基于Angular2-Ionic2 TypeScript的应用程序，并且在离子输入方面存在问题，似乎不会将min，max验证器属性识别为常规输入。我可能需要创建的其他验证器将是一个重复的验证器和一个整数验证器。简而言之，我需要创建一组强大的验证器。

Answer 1

FIRST WAY非常好，我认为最适合我，因为我有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
       }
     }
   }
}

}

我们可以在我们的（例如AppPage）类的consturctor中传入一个CustomValidator。

constructor(public navCtrl: NavController,
  public navParams: NavParams,
  public formBuilder: FormBuilder) {

      this.formGroup = formBuilder.group({
      'tableName': ['', Validators.compose([
          Validators.required,
          CustomValidators.duplicates(this.existingTables),
      ])],

      'totalSeats': ['', Validators.compose([
          Validators.required, 
          CustomValidators.min(2), 
          CustomValidators.max(20), 
          CustomValidators.wholeNumber,
      ])] 

      });

}

第二种方法是单独创建一个类，当你没有很多验证器时，这可能很容易做到，否则你将不得不为每个类制作一堆类。

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

Answer 2

将离子输入的类型更改为'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>

Answer 3

下面给出的代码是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
    };
  }
}

如何在Ionic 2中为离子输入添加自定义验证器？恩。检查最小/最大

3 个答案: