Angular Reactive form setValue setting string to number input type, input box empty but string value is assigned in controlls

Question

Angular Reactive form setValue setting string to number input type, input box empty but string value is assigned in controlls, validation required is not working

This is Form Controller

    ngOnInit() {
       this.profileForm = new FormGroup({
         name: new FormControl("", Validators.required),
         age: new FormControl("", Validators.required),
       }
    }

    patchAge(){
      this.profileForm.controls["age"].setValue("somethingString");
    }

This is template

<form [formGroup]="profileForm" (ngSubmit)="onFormSubmit()">
    <input
      type="text"
      formControlName="name"
    />
    <input
      type="number"
      formControlName="age"
    />
</form>

Andres2142 · Accepted Answer · 2022-04-21 04:24:24Z

0

The only validator your age control has is required, which means the value cannot be empty, so the value can be anything.

Even though you are setting the input as type=number, this is just a HTML validation, you are expecting your form object to be aware of this.

patchAge(){
  this.profileForm.get("age")?.patchValue("somethingString");
  console.log('Is my form valid?: ', this.form.valid) // TRUE
}

That's why your form valid state is TRUE, because it has indeed a value.

So the solution for this will be to add another validation to age

age: new FormControl("", [
  Validators.required, 
  Validators.pattern(/^\d+$/) // only numbers
]),

If you print right from the beginning the valid state of your form, it should be false

answered Apr 21, 2022 at 4:24

Andres2142

3,0122 gold badges18 silver badges22 bronze badges

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

Comments

Abdul Samad · Accepted Answer · 2022-10-28 18:18:46Z

0

try to change "" to 0 as follows age: new FormControl("", Validators.required) to age: new FormControl(0, Validators.required) on ngOnInit()

answered Oct 28, 2022 at 18:18

Abdul Samad

786 bronze badges

Collectives™ on Stack Overflow

Angular Reactive form setValue setting string to number input type, input box empty but string value is assigned in controlls

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related