ANGULAR TESTING - Form Input type="number" should only accept numbers

Question

i am trying to write some unit tests for my project and I needed some help about it. I have an input and i want to verify that it accepts only numbers/digits, otherwise it should be invalid.

TS:

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

HTML Template:

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

Unit Test (*.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
});

thanks !

Your problem is that even though you updated the value, it doesn't automatically trigger the html form validators to check again. stackoverflow.com/questions/32260082/… — canpan14
– canpan14, Commented Mar 10, 2020 at 13:59
[update] Even if we call updateValueAndValidity(), I have the same result. — Théo Esnault
– Théo Esnault, Commented Mar 10, 2020 at 14:22
The FormControl is not aware of element attributes like type. You need a validator if you want the control to know that non-numeric input is invalid. — The Head Rush
– The Head Rush, Commented Mar 10, 2020 at 14:36

djnose · Accepted Answer · 2020-03-10 14:31:57Z

0

I once had a similar problem, which is that formControl does not even distinguish between number and/or any other field.

Ended up creating my own 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;
    }
  }

which than can be used like

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

That way you can make sure you either get a number or undefined.

Hope it helps

answered Mar 10, 2020 at 14:31

djnose

9458 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Kesha · Accepted Answer · 2020-03-10 14:32:04Z

0

I think you have to add pattern validation Validators.pattern(/\d/)

Like this

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

because angular reactive form doesn't consider html validation in all cases

answered Mar 10, 2020 at 14:32

Ahmed Kesha

8105 silver badges11 bronze badges

Collectives™ on Stack Overflow

ANGULAR TESTING - Form Input type="number" should only accept numbers

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related