ANGULAR TESTING - Form Input type = "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>

Модульный тест (* .spe c .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

Я думаю, вам нужно добавить проверку шаблона Validators.pattern(/\d/)

Вот так

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

, потому что angular реактивная форма не учитывает html проверка во всех случаях

Answer 2

У меня когда-то была похожая проблема, которая заключается в том, что formControl даже не различает guish между числом и / или любым другим полем.

Закончилось создание моего собственного элемента управления

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

Таким образом, вы можете быть уверены, что получите либо номер, либо неопределенное значение.

Надеюсь, это поможет