TonyStudio

模板引用变量通常用来引用模板中的某个Dom元素。它还可以引用angular组件或指令或WebComponent。模板引用变量可以让我们在页面上声明变量并使用，也是一个可以让ts控制html的桥梁。

前面通过设定FromGroup的updateOn配置，将表单的验证时机修改为了当输入框输入焦点之后，这个操作引发的问题是，输入限制不起作用了！比如有些地方我只需要输入数字，不可以输入其他字符，做这个输入限制是靠在验证器里进行replace，现在是当鼠标遗失后才去验证，也就是鼠标遗失后采取replace，很糟心啊，得想想解决办法。

一直在使用angular的响应式表单来写业务，得心应手很是方便。但忽然领导反应说表单在刚开始输入的时候就会去验证，还没输完呢就出来一大坨红色的错误信息，很是不爽，感觉不是很好的用户体验，需要改为当用户输入完成后再验证，也就是当输入框遗失焦点（blur）之后才进行验证。得，找找解决方案吧。

仔细回想以前使用响应式表单的验证器的时候，只是验证输入的值是否非法，而没有做对应的限制输入，比如当输入一串金额的时候只能输入数字，有这种需求的时候，我们该怎么做限制输入？用input来监听？用onModelChange来监听？我们可以直接写在验证器里面。

表单的验证分为模板驱动验证和响应式表单的验证，响应式表单添加自定义验证器非常方便，所以我们来直接以响应式表单的验证为研究基础。

首先构造基本的表单：

1
2
3
4
5
6
7
8

<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input nz-input name="code" formControlName="code" id="code">
    </nz-form-control>
  </nz-form-item >
</form>

1
2
3
4
5
6
7
8
9
10

validateForm: FormGroup;
constructor(
    private fb: FormBuilder,
) {
}
ngOnInit() {
    this.validateForm = this.fb.group({
        code: [33, [Validators.required, Validators.maxLength(6)]],
    });
}

我们创建的这个响应式表单是要验证一个谷歌验证的「code」字段，并给与了两个验证器，一个必填验证，一个验证长度最长是6位。运行起来后，我们输入的如果超过6位范围输入框就会变成红色，这是OK的。

现在我们需要在验证的同时限制输入，比如只让用户输入数字，其他的一切都不可输入。

创建验证器，在验证的同时，限制输入

我们使用正则表达式来判断。首先，判断一个字符串是否是全数字：/^\d*$/.test(value)。然后将有「杂质」的字符串修正为纯数字：value.replace(/[^0-9]/ig, '')。

思路是，创建验证器，当有输入值的时候，验证器运行，判断是否是全数字，如果不是就进行替换。我们可以得到如下的验证器：

1
2
3
4
5
6
7
8
9
10
11
12

onlyNumber(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
        // value有值且如果值包含非数字，就需要替换
        if (control.value && !/^\d*$/.test(control.value)) {
            control.setValue(control.value.replace(/[^0-9]/ig, ''), {
                emitEvent: false,
                emitViewToModelChange: false,
            });
        }
        return null;
    };
}

将验证器使用在我们的响应式表单上：

1
2
3

this.validateForm = this.fb.group({
    code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],
});

运行程序，随便输入来测试测试，竟然是ok的？😯（那我前几次的时候是做了什么骚造作让浏览器堆栈溢出的？？？）

emmmmmmmm。。。。。。我上次确实是让浏览器堆栈溢出了，这次正常反而很奇怪了。不影响，我们来看看setValue(value, options)的options几个配置参数吧：

• onlySelf：如果为 true，则每次变更只影响该控件本身，不影响其父控件。默认为 false。
• emitEvent：如果为 true 或未提供（默认），则当控件值变化时， statusChanges 和 valueChanges 这两个 Observable 都会以最近的状态和值发出事件。 如果为 false，则不会发出事件。
• emitModelToViewChange：如果为 true 或未提供（默认），则每次变化都会触发一个 onChange 事件以更新视图。
• emitViewToModelChange：如果为 true 或未提供（默认），则每次变化都会触发一个 ngModelChange 事件以更新模型。

首先，对于onlySelf来讲，如果我们有跨字段的验证的话，设置这个为false就不影响表单层次的验证器。emitEvent是对statusChange和valeChanges两个Observable的影响，一般我们用Observable的方式监听字段的值变化时有用到。emitModelToViewChange配置是触发onChange来更新视图的，如果如果设置为false的话，无论我们怎么更新字段的值，是不会显示在页面上的。emitViewToModelChange触发ngModelCahnge时间更新模型，但好像这个参数设置为false并没什么用。

得得得，好的就行。

假如我们需要在验证的条件也和其他表单字段有关系怎么办？那我们需要formGroup级的验证。

formGroup的验证器

我们需要这样创建验证器，返回一个由formGroup构成的验证器：

1
2
3
4
5
6
7
8
9
10
11
12

onlyNumberValidator(formKeys: string[]): ValidatorFn {
    return (formGroup: FormGroup): ValidationErrors | null => {
        for (const key of formKeys) {
            const value = formGroup.controls[key].value;
            if (value && !/^\d*$/.test(value)) {
                formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), {
                    onlySelf: true,
                });
            }
        }
        return null;
    }};

使用：

1
2
3
4
5
6
7

this.validateForm = this.fb.group({
    typeList: [[]],
    feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]],
    code: [33, [Validators.required, Validators.maxLength(6)]],
}, {
    validator: this.onlyNumberValidator(['code']),
});

Rxjs中的Subject是一种特殊的Observable，它允许将值传播到许多观察者。普通的Observable是单播的（每个订阅的Observable都拥有Observable的独立环境），但Subject是多播的。Subject就像是EventEmitters，它维护着许多听众的注册列表。

今天想将一个angular的项目用jenkins来进行发布，但是无论怎么配置，jenkins运行shell的时候使用的是node 6.11，而不是node 8.11，但angular项目是只能运行在node 8.9及以上，这就很绝望，咋办？

自打建立博客以来啊，都一直是手动更新发布的，具体流程为：本地修改提交到github-》进入服务器从github拉取代码-》服务器里npm install-》服务器里hexo g发布。这个流程是没什么问题的，但是每次提交想发布了都得登录下服务器，而且是命令行操作，很繁琐，正好我服务器里面有jenkins，想着能用jenkins来自动发布不是省心多了么？

前面介绍了如何使用jenkins来部署博客，很是方便，写完博客-》提交github-》登录jenkins-》点击发布。但是我们能不能再省事一点呢？我写好后提交代码可以让博客自动发布呢？

String对象是JavaScript原生提供的三个包装对象之一，用来生成字符串对象。对字符串操作不够重视，没有特别去了解下字符串的操作，最近在写一些小脚本的时候常用到字符串操作，所以特地来整理下。

这两天在搜索博客的时候，搜索界面老是出不来，一看请求search.xml的时候报错：

1
2
3

This page contains the following errors:
error on line 47 at column 35: Input is not proper UTF-8, indicate encoding !
Bytes: 0x08 0xE4 0xB8 0x80

这很绝望啊，而且我博客本身就是整理的学习笔记，主要一大功能就是检索，这不能搜索很影响我效率啊，真捉急！