angular表单验证及自定义验证器

最近遇见了一些问题，需要记录一下。

angular的表单验证
js字符串的一些内置方法。

我做的响应式表单，不常用这个办法。其中有一个验证是手机号，要求是非空和符合手机号格式。刚好angular的form表单有validator方法可用，就很快写好了。但是死在手机号格式验证这里。死活验证不过。

  Validators.pattern = /**
    * Validator that requires a control to match a regex to its value.
     * @param {?} pattern
     * @return {?}
     */
  function (pattern) {
        if (!pattern)
            return Validators.nullValidator;
        var /** @type {?} */ regex;
        var /** @type {?} */ regexStr;
        if (typeof pattern === 'string') {
            regexStr = '';
            if (pattern.charAt(0) !== '^')
                regexStr += '^';
            regexStr += pattern;
            if (pattern.charAt(pattern.length - 1) !== '$')
                regexStr += '$';
            regex = new RegExp(regexStr);
        }
        else {
            regexStr = pattern.toString();
            regex = pattern;
        }
        return function (control) {
            if (isEmptyInputValue(control.value)) {
                return null; // don't validate empty values to allow optional controls
            }
            var /** @type {?} */ value = control.value;
            return regex.test(value) ? null :
                { 'pattern': { 'requiredPattern': regexStr, 'actualValue': value } };
        };
    };

这个方法是，内置的pattern方法。我参照着做了个模拟方法，但是验证始终是false。我查了很多资料，还是没找到办法。然后在查资料时，发现可以自定义验证器，就自己做了一个。代码如下：

/**
 * model driven 数据驱动表单
 *
 */
export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      // 获取当前控件的内容
      const str = control.value;
      // 设置我们自定义的验证类型
      const res = {};
      res[type] = {str}
      // 如果验证通过则返回 null 否则返回一个对象（包含我们自定义的属性）
      return validateRex.test(str) ? null : res;
    }
  }

解决！！！

字符串截取

slice(start,end)
start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
返回值:以新的字符串返回被提取的部分

字符串替换

replace(regexp/substr,replacement)
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。
返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的

这两都是返回新字符串。

结束啦！

最后编辑于：2019.10.23 18:00:54