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

罗伊

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

这是我的条件,

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

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

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

    一世。7

    ii.10

    三.11

    四、13

    v. 十四

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

用户10083387

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular2 - 反应式表单验证

反应式表单检查表单字段为空或默认并禁用按钮 Angular

为什么我的反应式表单验证在Angular中失败

Angular 中的反应式表单验证错误

Angular2中的反应式FormsModule

Angular 2 反应式表单自定义验证

复制angular2中的表单字段值

有条件地在Angular 2反应性表单的表单字段中实施验证

如何使用动态输入字段防止表单提交(Angular 中的反应式表单)

在Angular 6中使用反应式表单隐藏字段后如何提交表单?

Angular 8 反应式表单验证器

Angular 反应式表单:如何在对话框中显示验证错误?

结构化Angular2表单-如何包括可验证的条件表单字段

Angular2中的跨字段验证

Angular2 Karma测试-如何使表单字段“脏”?

Angular2中的ViewChild是什么?

Angular 2 - 带有微服务的反应式表单异步验证

angular2中的WebSockets

angular2中的评论

在Angular2中获取

angular2异步表单验证

focus() 的 Angular2 表单验证

Angular 7中的反应式电子邮件验证

在angular2的@contentChild中检测焦点事件的最佳方法是什么?

在angular2中组织路线的最佳方法是什么

如何在angular2的嵌套表单字段中获取和设置值?

Angular2反应性表单-使用下拉菜单为表单字段设置默认值

如何解决反应式表单中的电子邮件验证错误:Angular 中的对象可能为“空”

如何使用我的 formBuilder.group 中的两个组验证 Angular 10+ 中的反应式表单