“可选字段”Angular 2 Reactive 表单的自定义验证器答案

【问题标题】：Custom validator for "Optional Field" Angular 2 Reactive forms“可选字段”Angular 2 Reactive 表单的自定义验证器
【发布时间】：2018-07-25 14:17:56
【问题描述】：

我为“可选”字段编写了一个自定义验证器，逻辑和验证与相应的值配合得很好。但是，一旦单击文本字段并且它不提供将显示为必填字段的值。如果有人知道，请帮帮我。

这是我的自定义验证器类。在这里，我的文本字段值将类似于 '123s,wd345,23' 和 range(2,12)

custom-validator.ts

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

export class OrderUnitValidators {

  static range(min: number, max: number): ValidatorFn {
      return (c: AbstractControl): { [key: string]: boolean } | null => {
          if(c && (c.value !==null || c.value !== undefined)){
            const str=c.value;
            const valArr=str.split(',');
            for(let val in valArr){
                if(valArr[val].length<2 || valArr[val].length>12){
                return { 
                    'range' : true
                     };
                }
          
            }
        }
        
        return null;
      };
  }
}

【问题讨论】：

将您的第一个 if 更改为 if (c && c.value !== '')
当你初始化你的 FormGroup 时，你用空字符串 '' 来初始化它？
@Florian 非常感谢，一切正常。

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

【解决方案1】：

正如弗洛里安所说，你犯了一个小错误，我已经测试了你的代码，它对我来说很完美。但请确保在 FormGroup 中您应该初始化空字符串。

export class OrderUnitValidators {

  static range(min: number, max: number): ValidatorFn {
      return (c: AbstractControl): { [key: string]: boolean } | null => {
          if(c && (c.value !== '')){
            const str=c.value;
            const valArr=str.split(',');
            for(let val in valArr){
                
                if(valArr[val].length<2 || valArr[val].length>12){
                return { 
                    'range' : true
                     };
                }
          
            }
        }
        
        return null;
      };
  }
}

【讨论】：