时间戳

首页 > 解决方案 > 角度测试 - 表单输入 type="number" 应该只接受数字

angular - 角度测试 - 表单输入 type="number" 应该只接受数字

问题描述

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

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

谢谢 ！

标签： angularunit-testingjasminekarma-runnerangular-reactive-forms

解决方案

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

最终创建了我自己的控件

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);

这样你就可以确保你得到一个数字或未定义的。

希望能帮助到你

推荐阅读