在 Angular2 中验证反应式表单字段的最佳方法是什么？答案

【问题标题】：What is the best way to validate reactive form field in Angular2?在 Angular2 中验证反应式表单字段的最佳方法是什么？
【发布时间】：2018-07-28 21:28:06
【问题描述】：

我正在尝试验证 Angular 2 中的响应式表单字段。我在这里编写了自定义验证器，我不确定这是否是正确的验证方法。但是无论我如何通过我的代码没有得到准确的结果，一些测试用例都失败了。如果有人知道，请纠正我的代码以及方法，如果有错误。

这是我的条件，

如果输入通配符，文本字段应为 4 到 14 个字母数字。否则为 7 到 25 个字母数字。

一个。如果输入星号 (*)，则必须是最后一个字符，并且应该是 5 到 13 个字母数字。

b.如果输入问号 (?)，它可以在 5 到 14 之间的任何位置。以下文本长度将被接受。

我。 7

ii.10

iii.11

四。 13

v. 14

c。如果不输入通配符，则可以是 7 到 25 个字母数字。

这是我的代码，我已经编写了自定义验证器。

static ProductTypeValidation(min: number, max: number): ValidatorFn {
  return (c: AbstractControl): { [key: string]: boolean } | null =>{
    if(c && (c.value !== '')){
      const s=c.value;
      var reg=/[^A-Za-z0-9]+/;
      var reg1=/[^A-Za-z0-9*?]+/;
      if(!s.match(reg)){
        if(s.length<7 || s.length>25){
          console.log('Invalid with size')
          return{
              'ProductTypeValidation': true
          };
        }
        else{
          console.log('valid with size');
          return null;
        }
      }else{
      if(s.match(reg1)){
        console.log('Main Error');
        return{
          'ProductTypeValidation': true
      };
      }else{
      for(let i=0;i<s.length && i<4;i++){
        if(s.charAt(i).match(reg)){
          console.log('Invalid first');
          return{
            'ProductTypeValidation': true
        };
        }else{
          console.log('valid');
          return null;
        }
      }
      if(s.length>4 && s.length < 14 ){
        for(let i=4;i<13;i++){
          if(s.charAt(i) == '*'){
            if(s.charAt(i+1) == ''){
              console.log('valid');
              return null;
            }else{
              console.log('Invalid *');
              return{
                'ProductTypeValidation': true
            };
            }
          }
        }
      }
      if(s.length>4 && s.length <15){
        for(let i=4;i<14;i++){
          if(s.charAt(i) == '?'){
            if(s.length == 7 || s.length == 10|| s.length == 11 || s.length == 13 || s.length ==14){
              console.log('valid');
              return null;
            }
            else{
              console.log('Invalid?');
              return{
                'ProductTypeValidation': true
            };
            }
          }
        }
      }
      for(let i=13;i<s.length && i<25;i++){
        if(s.charAt(i).match(reg)){
          console.log('Invalid remaining');
          return{
            'ProductTypeValidation': true
        };
        }else{
          console.log('valid');
          return null;
        }
      }
      
      }
    
      }

    }
     return null; 
  };
}

【问题讨论】：

标签： javascript angular validation angular-reactive-forms custom-validators

【解决方案1】：

您应该在您的表单控制器中调用自定义验证器，然后您的表单控制器会注意在每次按键时调用您的方法。

'productType': new FormControl('', [CustomValidators.productTypeValidation(6,25)]);

【讨论】：

【解决方案2】：

我为上述情况编写了“自定义验证器”，但是当我从项目中调用它时，它只对第一次按键有效，即使它是一个在不同测试时给我正确结果的函数。哪位大神可以指正一下。

这是我更新的代码。

//Custom validator for Product type
static ProductTypeValidation(min: number, max: number): ValidatorFn {
  return (c: AbstractControl): { [key: string]: boolean } | null =>{
    if(c && (c.value !== '')){
    const s=c.value;
    var reg=/[^A-Za-z0-9]+/;
    var reg1=/[^A-Za-z0-9*?]+/;
    var reg2=/[^A-Za-z0-9*]+/;
    var reg3=/[^A-Za-z0-9?]+/;
    if(s.match(reg))
    {
      if(s.match(reg1))
      {
        console.log('Apart from special char existed')
        return{
          'ProductTypeValidation': true
        };
      }else{
            if(s.length < 4)
            {
                console.log('special char existed but length is minimum');
                return{
                  'ProductTypeValidation': true
                };
            }else{
                    if(s.charAt(0).match(reg) || s.charAt(1).match(reg) || s.charAt(2).match(reg) || s.charAt(3).match(reg))
                    {
                         console.log('first 4 positions it self special char existed');
                         return{
                          'ProductTypeValidation': true
                        };
                    }else{
                            if(s.length>4 && s.length<=14)
                            {
                                 if(s.match(reg2) && s.match(reg3))
                                 {
                                     let a=s.indexOf('*');
                                     let b=s.indexOf('?');
                                    if(b>a)
                                    {
                                        console.log('Invalid after * everything is invalid');
                                        return{
                                          'ProductTypeValidation': true
                                        };
                                    }else if((s.charAt(a+1) == '') && (s.length == 7 ||s.length == 10 || s.length == 11 ||s.length == 13 || s.length == 14) && (a<13))
                                    {
                                        
                                        console.log('valid with all conditions * and ?');
                                        return null;
                                    }else{
                                        console.log('Invalid ? and *');
                                        return{
                                          'ProductTypeValidation': true
                                        };
                                         }
                                 }
                                else if(s.match(reg2))
                                 {
                                     if(s.length == 7 || s.length ==10 || s.length == 11 || s.length == 13 || s.length == 14)
                                     {
                                         console.log('valid with ?');
                                         return null;
                                    }else{
                                     console.log('invalid with ?');
                                     return{
                                      'ProductTypeValidation': true
                                    };
                                    }
                                 }else{
                                    let a=s.indexOf('*');
                                    let b=s.indexOf('?');
                                    if(s.length>4 && s.length <14)
                                    {

                                    if(b>a)
                                    {
                                        console.log('Invalid after * everything is invalid');
                                        return{
                                          'ProductTypeValidation': true
                                        };
                                     }else if(s.charAt(a+1) == '')
                                     {
                                        console.log('vaid with *');
                                        return null;
                                    }else{
                                         console.log('Invalid with *');
                                         return{
                                          'ProductTypeValidation': true
                                        };
                                        }
                                    }else{
                                      console.log('* exceeded the size');
                                      return{
                                        'ProductTypeValidation': true
                                      };
                                    }
                                  }

            
                             }else{
                                    if(s.match(reg))
                                    {
                                    console.log('After 14 no special characters are allowed');
                                    return{
                                      'ProductTypeValidation': true
                                    };
                                    }else{
                                    console.log('it will return null');
                                    return null;
                                    }
  
                                }
                        }
                }
            }
      
    }else{
      if(s.length<7 || s.length>25){
        console.log('size not matched');
        return{
          'ProductTypeValidation': true
        };
      }else{
        console.log('Size matched');
        return null;
      }
    }
      
}
return null;

}
}

【讨论】：