Question

我正在尝试将验证方法分离为ionic2 / angular2中的单个文件，即创建可重用的验证代码，我将来可以将其用于其他项目

我想知道在angular2或ionic2中创建可重用文件的最佳方法是什么。
第二个问题是我尝试创建一个单独的 validation.ts 文件并调用该方法，但它给出了一个奇怪的错误。

我尝试了两种方法。首先创建一个文件 username.ts 并在其中创建一个方法。在第二个我创建了一个提供程序并在其中放置相同的方法。

代码：Username.ts

import { FormControl } from '@angular/forms';

export class UsernameValidator {

constructor() {

}


  validateEmail(email) {
    var re = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
    return re.test(email);
  }

  validatePhone(phone) {
      var re = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
      return re.test(phone);
  }

  checkUsername(control){

    if(this.validateEmail(control.value)||this.validatePhone(control.value))
    {
      return true;
    }
    else
      return false;
  }



}

同样的提供者

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the Validation provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class Validation {

  constructor() {
    console.log('Hello Validation Provider');
  }

  validateEmail(email) {
    return true;
  }

  validatePhone(phone) {
      return true;
  }

  checkUsername(control){
    console.log(control.value)
    var checkemail=this.validateEmail(control.value);
    var checkphone=this.validatePhone(control.value);
    if(checkemail||checkphone)
      return true;
    else
      return false;
  }

}

从login.ts文件调用该函数

 this.loginForm=formBuilder.group({
        username: ['',Validators.compose([Validators.required]),validation.checkUsername],
        password: ['',Validators.compose([Validators.required])]
    });

evrytime我收到错误

：无法读取未定义的属性'validateEmail'

我对角度和离子的理解不足以克服这个错误。请帮忙

谢谢！

Answer 1

对于

checkUsername(control){
   if(this.validateEmail(control.value)||this.validatePhone(control.value))
    {
      return true;
    }
    else
      return false;
  }

control未定义，您正在尝试获取未定义的属性value。您应该将checkUsername包装在if语句中，如下所示：

checkUsername(control){
    if(control && control.value) { 
if(this.validateEmail(control.value)||this.validatePhone(control.value))
        {
          return true;
        }
        else
          return false;
      }
}

或在您的提供商中

  checkUsername(control){
    if (control && control.value) {
    console.log(control.value)
    var checkemail=this.validateEmail(control.value);
    var checkphone=this.validatePhone(control.value);
    if(checkemail||checkphone)
      return true;
    else
      return false;
    }
  }

这样，你总会获得一个价值。

Answer 2

在此处设置功能时：

    username: ['',Validators.compose([Validators.required]),validation.checkUsername],

validation.checkUsername在此处需要调用函数的范围，而不是Validation类的范围。所以this不引用Validation。

您可以通过将函数定义为箭头函数来解决此问题：

checkUsername:any = (control) => {
    console.log(control.value)
    var checkemail=this.validateEmail(control.value);
    var checkphone=this.validatePhone(control.value);
    if(checkemail||checkphone)
      return true;
    else
      return false;
  }

验证构造函数中的

OR ，将函数绑定到this，如下所示：

 constructor() {
    console.log('Hello Validation Provider');
    this.checkUsername = this.checkUsername.bind(this);
  }

如何在ionic2中为验证创建单独的文件？

2 个答案: