angular реактивная форма не может удалить нулевой элемент

Question

Я пытаюсь использовать реактивную форму, и мне нужно создать только ключ для каждого заполненного элемента, но поскольку создается первый момент, если поле не заполнено, оно отправляет null, а мне нужно поле, которое не пустой для отправки, мой код:

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;
    }
  }

, если только один из них был полным console.log return

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

, но мне нужно:

{
        basePrice: 20
}

Answer 1

Вы можете фильтровать нулевые значения в функции отправки:

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

Answer 2

Вы можете использовать JAVASCRIPT logi c Like.

сначала связать все значения в одной переменной.

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

Затем создайте другую переменную для ключа объекта и используйте для l oop для удаления нулевых значений.

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);

Вот демонстрация stackblitz: https://stackblitz.com/edit/angular-ivy-eq5d9a