angular reactive form can't remove null item

Question

I try to use the reactive form and I need to create only the key for each item that is filled But because the first moment is created, if the field is not full, it sends null While I want a field that is not empty to be sent at all my code is:

form: FormGroup;
 constructor() {
    this.form = new FormGroup({
      basePrice: new FormControl(null, [customeValidator.numberOnly()]),
      discountValue: new FormControl(null, [customeValidator.numberOnly()]),
      roomViewCount: new FormControl(null, [customeValidator.numberOnly()])
    });
  }


onCalcute() {
    console.log(this.form.value);

    if (this.form.valid) {
      this.roomData = {
        basePrice: this.form.value.basePrice,
        discountValue: this.form.value.discountValue,
        roomViewCount: this.form.value.roomViewCount
      };
      this.clicked = true;
    }
  }

if just one of them was full console.log return

{
        basePrice: 20,
        discountValue: null,
        roomViewCount: null
}

but I need:

{
        basePrice: 20
}

Lia · Accepted Answer · 2020-07-14 19:23:38Z

2

You can filter null values in submit function:

onSubmit() {
    const filtered = {};
    if (this.form.valid) {
      for (let key in this.form.value) {
        if (this.form.value[key]) {
          filtered[key] = this.form.value[key];
        }
      }
      console.log(filtered);
    }
  }

DEMO

answered Jul 14, 2020 at 19:23

Lia

12k3 gold badges36 silver badges53 bronze badges

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

2 Comments

heliya rb Over a year ago

So where should add my validation? in your sample code there is no validation

Lia Over a year ago

@heliyaRahbar for numberOnly validation you can use something like this: basePrice = new FormControl(null, Validators.pattern("^[0-9]*$")); that validates null value.

Hossein Ganjyar · Accepted Answer · 2022-06-22 05:30:05Z

2

You could do this just in a single line before submitting, as like this:

Object.keys(this.form).forEach((key) => (this.form[key] == null) && delete this.form[key]);

It's simplest & more intelligent!

edited Jun 22, 2022 at 5:30

answered Jun 22, 2022 at 5:21

Hossein Ganjyar

8638 silver badges18 bronze badges

Comments

Shashikant Devani · Accepted Answer · 2020-07-15 18:23:36Z

1

You can use JAVASCRIPT logic Like.

first bind all values in one variable.

const formValues = this.form.value; 
console.log('Result before remove null', formValues);

Then make another variable for Object key and use for loop to remove null values.

const formKeys = Object.keys(formValues);
if(formKeys.length){
    for(let i = 0; i < formKeys.length; i++){
      if(formValues[formKeys[i]] === null || formValues[formKeys[i]] === undefined){
         delete formValues[formKeys[i]];
       }
     }
   }

console.log('Result', formValues);

Here is stackblitz demo: https://stackblitz.com/edit/angular-ivy-eq5d9a

edited Jul 15, 2020 at 18:23

answered Jul 14, 2020 at 14:28

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

1 Comment

Shashikant Devani Over a year ago

If you vote down answer or question, Give your reason. So we understand what is wrong in answer or question.

Collectives™ on Stack Overflow

angular reactive form can't remove null item

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related