angular4输入有效性_angular 表单验证器验证的同时限制输入

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

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

首先构造基本的表单：

1

2

3

4

5

6

7

8

GA Code

1

2

3

4

5

6

7

8

9

10validateForm: 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

12onlyNumber(): 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

3this.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

12onlyNumberValidator(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

7this.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']),

});