Angular react 形式无法删除空项目

Question

我尝试使用响应式(Reactive)形式，我只需要为每个填充的项目创建键
但是因为创建了第一个时刻，如果该字段未满，它会发送 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 返回

{
        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