#Manipulate input right before the form validation starts

7 messages · Page 1 of 1 (latest)

viscid knoll
#

Hello,
I need to modify the value of a form control on blur, before the validation executes. Both the validation and the input manipulation must happen after the input is blurred. Right now, I tried to execute the manipulate function when blur event happens, but it does not work.

Example, what should happen:

  1. input has the value: example.com,
  2. on blur, the value is set to 123
  3. validation starts

Is this achievable, or would I need to explicitly call the validation after the manipulation happens?

  this.linkForm = new FormGroup({
    [NewLinkFields.destinationUrl]: new FormControl(null, {
      validators: [LinkValidator.isValidUrl],
      updateOn: 'blur',
    }),

  manipulate() {
    this.linkForm.get(NewLinkFields.destinationUrl)?.setValue('somevalue');
    this.linkForm.get(NewLinkFields.destinationUrl)?.updateValueAndValidity();
  }
blissful nebula
#

So ignoring the on blur bit, are u saying u need a way for changing the input value in general? So have a different input vs what gets put on the form model?

#

I mean, I feel like a CVA could solve this. Not sure if there are alternatives.

tulip ivy
#

I also thing a CVA is what you need for the solution you described. But what is the original problem you want to solve? Because this solution looks weird to me.

vast path
#

You can add native (blur) and execute function that manipulates input's value, but I am not pretty sure what will be executed first.

On the other hand, as it is already said, you can create component with ControlValueAccessor that do such a thing on blur and then may pass the value

blissful nebula
#

You can use a component, but you might as well use a directive afaik.