Angular Reactive Forms - 在提交时排除空值

Question

我有一个角度反应形式如下：

this.newMeasurementForm = new FormGroup({
  'type' : new FormControl(null, []),
  'measurementDate' : new FormControl(null, []),
  'measuredBy' : new FormControl(null, []),
  'bloodOxygen' : new FormGroup({
    'hemoglobine': new FormControl(),
    'hematocriet': new FormControl(),
    'oximetry': new FormControl(),
    'deviceTypeOximetry' : new FormControl(null, []),
    'deviceTypeBloodOxygen' : new FormControl(null, [])
  }),
  'gripStrength' : new FormGroup({
    'gripLeft' : new FormControl(null, []),
    'gripRight' : new FormControl(null, []),
    'gripAperture' : new FormControl(null, []),
    'deviceType' : new FormControl(null, [])

  }),
  'lungFunction' : new FormGroup({
    'fev' : new FormControl(null, []),
    'fev1' : new FormControl(null, []),
    'fev2575' : new FormControl(null, []),
    'pef' : new FormControl(null, []),
    'fivc' : new FormControl(null, []),
    'smoking' : new FormControl(null, []),
    'cigarettesPerDay' : new FormControl(null, []),
    'yearsOfSmoking' : new FormControl(null, []),
    'packYears' : new FormControl(null, []),
    'lungAge' : new FormControl(null, []),
    'intervention' : new FormControl(null, []),
    'deviceType' : new FormControl(null, [])
  }),
  'enduranceCapacity' : new FormGroup({
    'pulse' : new FormControl(null, []),
    'power' : new FormControl(null, []),
    'heartRate' : new FormControl(null, []),
    'vo2max' : new FormControl(null, []),
    'deviceType' : new FormControl(null, [])
  }),
  'generalMeasurements' : new FormGroup({
    'height' : new FormControl(null, []),
    'weight' : new FormControl(null, []),
    'bmi' : new FormControl(null, []),
    'circumNavel' : new FormControl(null, []),
    'circumButtocks' : new FormControl(null, []),
    'bai' : new FormControl(null, []),
    'navelButtocks' : new FormControl(null, []),
    'deviceTypeGeneralMeasurements' : new FormControl(null, []),
    'deviceTypeCircumNavel' : new FormControl(null, []),
    'deviceTypeCircumButtocks' : new FormControl(null, [])
  }),
  'measurementGlucoseHeart' : new FormGroup({
    'hoursFasting' : new FormControl(null, []),
    'sysBP' : new FormControl(null, []),
    'diaBP' : new FormControl(null, []),
    'totalCholestrol' : new FormControl(null, []),
    'hdl' : new FormControl(null, []),
    'triglycerides' : new FormControl(null, []),
    'totalCholestrolHDL' : new FormControl(null, []),
    'ldl' : new FormControl(null, []),
    'hb1ac' : new FormControl(null, []),
    'glucose' : new FormControl(null, []),
    'crp' : new FormControl(null, []),
    'deviceTypeBP' : new FormControl(null, []),
    'deviceTypeCholestrol' : new FormControl(null, []),
    'deviceTypeHb1Ac' : new FormControl(null, []),
    'deviceTypeGlucose' : new FormControl(null, []),
    'deviceTypeCRP' : new FormControl(null, [])
  }),
  'physicalActivity' : new FormGroup({
    'vigorous' : new FormControl(null, []),
    'moderate' : new FormControl(null, []),
    'netActivity' : new FormControl(null, []),
    'walking' : new FormControl(null, []),
    'stepCount' : new FormControl(null, []),
    'sitting' : new FormControl(null, []),
    'deviceType' : new FormControl(null, [])
  }),
  'bodyComposition' : new FormGroup({
    'fatPercent' : new FormControl(null, []),
    'fatMass' : new FormControl(null, []),
    'muscleMass' : new FormControl(null, []),
    'hipWaistRatio' : new FormControl(null, []),
    'visceralFat' : new FormControl(null, []),
    'deviceType' : new FormControl(null, [])
  })
});

此表单中的多个字段可以为空/null。我想在提交表单时排除所有空字段。目前，form.values 返回所有空字段设置为 null 的字段。我想从表单值中删除 null 属性。我试过以下代码：

Object.keys(data).forEach(key =>  data[key] != null ? fields[key] = data[key] : key);

但它只排除顶层的空字段，而不是内部组。如何让它发挥作用？

Answer 1

您可以以递归方式扩展您的解决方案：

假设这是您的带有嵌套对象的表单对象：

const newMeasurementForm = {
  "type: "X",
   value: null,
  "bodyComposition": {
    "a":"b",
    "c": null,
  }
};

您可以调用以下函数：

const removeNull = (formObject) => {
  Object.keys(formObject).forEach(key => {
     if (formObject[key] && typeof formObject[key] === "object") {
       removeNull(formObject[key]);
     } else if (formObject[key] === null) {
       delete formObject[key];
     }
   });
};