角度测试 - 表单输入类型= "number" 只接受数字

Question

我正试图为我的项目编写一些单元测试，我需要一些帮助。我有一个输入，我想验证它是否只接受数字/数字，否则它应该是无效的。

TS:

this.form = this.formBuilder.group({
inputNumber: [null, [Validators.required, Validators.min(0)]]});

HTML模板：

<mat-form-field>
<input matInput placeholder="pls give a number" type="number" step="1" formControlName="inputNumber">
</mat-form-field>

单元测试(*.spec.ts(：

it('FormControl only accepts numbers', () => {
let inputNumber = component.form.controls['inputNumber'];
inputNumber.setValue(null);
console.log('Valid :', inputNumber.valid);//valid: false (required)
inputNumber.setValue('any string or !number');
expect(inputNumber.valid).toBe(false);//but returns TRUE
});

谢谢！

Answer 1

我曾经遇到过一个类似的问题，那就是formControl甚至不区分数字和/或任何其他字段。

最终创建了我自己的Control

export class NumberControl extends FormControl {
_value: number | undefined;
get value() {
return this._value;
}
set value(value) {
this._value = (value || value === 0) ? Number(value) : undefined;
}
}

它可以像一样使用

formControl = new NumberControl('', field.validator);

这样你就可以确保你要么得到一个数字，要么没有定义。

希望它能帮助

Answer 2

我认为您必须添加模式验证Validators.pattern(/d/)

像这个

this.form = this.formBuilder.group({
inputNumber: [null, [Validators.required,Validators.pattern(/d/), Validators.min(0)]]});

因为angular reactive表单并没有在所有情况下都考虑html验证