Question

111

Angular 5 solely validation on blur?

rated 0 times [ 114] [ 3] / answers: 1 / hits: 21024 / 6 Years ago, mon, april 30, 2018, 12:00:00

I wonder if it is possible to have the validation in reactive forms on blur. At the moment you can set updateOn: blur but then the values of the input fields won't update on input. In my case i need the values to be updated on every keystroke because I do calculations with it and show the result to the user. The validation should only happen on blur.

thx.

EDIT:

I use FormBuilder, some build in validators and some custom validators. Example code:

let formToMake = {

  purpose: [null, Validators.required],

  registrationDate: this.fb.group({

    day: [null, Validators.required],

    month: [null, Validators.required],

    year: [null, Validators.required]

  }),

  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]

};

If i would use the blur event i need to do all my validation manually, which i think is not a good way.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harrisa

Add To Favorites

Follow

Total Points: 514

Total Questions: 93

Total Answers: 93

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

answered 6 Years ago kristinsonjab · Accepted Answer

What I eventually have done:

Using reactive forms:

TS

this is the form to make. I needed the productCost and loanAmount to be validated on blur but the values itself needed to update onchange. If you set updateOn: blur the validation happens after the blur event but als the values will update after the blur event.

let formToMake = {

      productCost: new FormControl(null, {validators: Validators.required, updateOn: blur}),

      loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: blur}),

      loanLength: new FormControl(49, {validators: Validators.required, updateOn: change})

    };

handleInput method:

To solve this I just made an event handler which will be called on the input event.

TS

handleInput(e: any) {

    this.loanAmount = e;

  }

HTML

<input class=form__input type=number value={{loanForm.get('loanAmount').value}} id=loanAmount formControlName=loanAmount (input)=handleInput($event.target.value)>