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

【问题标题】：ANGULAR TESTING - Form Input type="number" should only accept numbers角度测试 - 表单输入 type="number" 应该只接受数字
【发布时间】：2020-06-22 10:30:18
【问题描述】：

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

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

谢谢！

【问题讨论】：

您的问题是，即使您更新了值，它也不会自动触发 html 表单验证器再次检查。 stackoverflow.com/questions/32260082/…
[update] 即使我们调用updateValueAndValidity()，我也有同样的结果。
FormControl 不知道像type 这样的元素属性。如果您希望控件知道非数字输入无效，则需要一个验证器。

标签： angular unit-testing jasmine karma-runner angular-reactive-forms

【解决方案1】：

我曾经遇到过类似的问题，就是 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);

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

这样

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

因为 Angular 响应式表单在所有情况下都不会考虑 html 验证

【讨论】：