Change value from 'null' to 'undefined' in Angular Reactive Form

Question

I am currently working on a form component using Reactive Forms and Angular13+. I have already set the form and it is working like it should, but I have a problem I can not find a solution.

I post the code for the form.

form.component.ts:

    this.myForm= this.fb.group({
      input1: new FormControl(),
      input2: new FormControl(),
      input3: new FormControl(),
      input4: new FormControl(),
      input5: new FormControl(),
    });

As you can see, none of the inputs are required, so the user can either fill up the input field or not.

My problem comes when I want to pass the object that returns the form (console.log(form)), if any of the input fields is not filled, it returns null but I need to return undefined.

Is there a way to do it?

EDIT:

I paste what the form returns when I do console.log()

input1: null
input2: null
input3: 'some data'
input4: null

When the input field is filled, it returns with the data provided, but when it is not filled, it returns null.

Can u provide a demo code on stackblitz.com ? Otherwise this will be closed — Shashank Vivek
– Shashank Vivek, Commented Sep 28, 2022 at 10:45
I have updated the question with that it logs. I dont think it is needed to make a stackblitz demo since it is just a clg — AhmedSHA256
– AhmedSHA256, Commented Sep 28, 2022 at 10:49
It needs to be undefined because the object returned from the form gets sent to the backend transformed into a URL (like query params) and if the field is null, it transform it into literal string 'null', but if the field is undefined, it skips the field and doesn't append to the url. — AhmedSHA256
– AhmedSHA256, Commented Sep 28, 2022 at 11:08
Why you don't iterate through the keys of the final value and update the null to undefined before sending it to the BE? — Amer
– Amer, Commented Sep 28, 2022 at 11:10

Amer · Accepted Answer · 2022-09-28 11:37:03Z

2

You can achieve that by mapping the form's value before sending it to the BE, like the following:

export function getMappedValue<T>(value: T): T {
  return Object.keys(value).reduce((acc, curr) => {
    if (value[curr] !== null) {
      acc[curr] = value[curr];
    }
    return acc;
  }, {} as T);
}

//...

// Then we can use it in the component before sending the value to BE:
const valueToBeSent = getMappedValue(this.myForm.value);

answered Sep 28, 2022 at 11:37

Amer

6,7442 gold badges12 silver badges36 bronze badges

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

1 Comment

AmadeusK525 Jun 3 at 22:17

While this may work for some people, I have a usecase where I have variables that can be null and others that can be undefined, and they should be treated differently. I don't like how Reactive Forms make this so difficult.

Collectives™ on Stack Overflow

Change value from 'null' to 'undefined' in Angular Reactive Form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related