"Optional Field" Angular 的自定义验证器 2 个响应式表单

Question

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

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

自定义-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;
      };
  }
}

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

"Optional Field" Angular 的自定义验证器 2 个响应式表单

Custom validator for "Optional Field" Angular 2 Reactive forms

javascript

angular

angular-reactive-forms

custom-validators