2

我在角度 2 中遇到了反应式表单的问题。我想创建我的对象以将其发送到我的 API，但我的 ReactiveForms 也没有生成必需的字段和表单组。

如果我通过 http post 请求直接发送我的对象，我有这个 JSON：

MyObject{
Name:"toto"
Surname:""
   Address:{
    City:"",
    StreetName:""
   }
}

但我希望这个 JSON 与 API 一致。（如果有空或 null 属性/对象，我会收到错误，因为字段存在但无效：

MyObject{
Name:"toto"
}

因为姓氏和地址是可选的。

我将 ReactiveForm 与 formBuilder 一起使用，但我不知道如何仅获取填充字段。

这就是我创建表单的方式：

myForm: FormGroup;
myUserModel : UserModel; // (Interface UserModel such as my form fields)

constructor(private fb : FormBuilder){}

createForm(){
   this.myFrom = this.fb.FormGroup({
      Name:['';Validators.requires],
      Surname:'',
      Address:this.fb.FormFroup({
          City: '',
          StreetName:''
      })
   })
}

onSubmit(){
    this.myUserModel = this.myForm.value;
    this.registerUserToAPI(this.myUserModel);
}

为了欺骗我使用它，但它太脏了......：

cleanObjectToSend(obj){
    return this.removeEmptyObj(this.removeEmptyAttribute(obj));
  }

  removeEmptyAttribute = (obj) => {
    Object.keys(obj).forEach(key => {
      if (obj[key] && typeof obj[key] === 'object') this.removeEmptyAttribute(obj[key]);
      else if (obj[key] == null || obj[key] == '') delete obj[key];
    });
    return obj;
  };

  removeEmptyObj(obj){
    Object.keys(obj).forEach(key => {
      if (obj[key] && typeof obj[key] === 'object') {
        if(Object.keys(obj[key]).length===0 && obj[key].constructor == Object){
          delete obj[key];
          return;
        }
        else this.removeEmptyObj(obj[key]);
      }
      else if (obj[key] == null || obj[key] == '') delete obj[key];
    });
    return obj;

  }

它只允许我获取非空字段而不是空字段来生成我的 JSON。

如何在没有 null 或空值的情况下直接获得 JSON clean JSON？

4

2 回答 2

0

好的，您的回答Lazar Ljubenović，但没有其他方法可以使这个有角度的吗？使用其他表单类型，例如模板驱动表单和 ngModel 吗？

更新 ：

我认为这是在不删除的情况下清理 JSON 对象的更好方法。它适用于嵌套对象！

JSON.stringify(myModel,this.replacer);

replacer(key,value){
if(value == null || value == '' || (Object.keys(value).length === 0 && value.constructor == Object) || value == {})
  return undefined;
else if(value && typeof value === 'object'){
  let isEmptyObject = true;
  Object.keys(value).forEach(key => {
    if(value[key] != null && value[key] != ''){
      isEmptyObject = isEmptyObject && false;
    }
  });
  if(isEmptyObject) return undefined;
  else return value;
}
else return value;
}
于 2017-09-02T08:29:21.743 回答
0

它们存在是因为您已进入它们。（我已经编辑了你的代码，因为它有奇怪的语法错误和拼写错误。）

this.myFrom = this.fb.group({
   Name: ['', Validators.required],
   Surname: '',
   Address:this.fb.group({
       City: '',
       StreetName: '',
   })
})

如果用户没有触摸表单，这些值将保持为您编写它们的样子。空字符串也是值。

您可以尝试使用undefined默认值。

this.myFrom = this.fb.group({
   Name: [undefined, Validators.required],
   Surname: undefined,
   Address:this.fb.group({
       City: undefined,
       StreetName: undefined,
   })
})

但是，如果用户来到该字段，键入一个字母，然后离开，这将再次是一个空字符串。因此，没有真正的方法可以自动执行您想要的操作，因为它是您自己基于 API 的自定义逻辑。

我建议你修复服务器。空字符串通常是“未输入”，而不是“格式错误”或其他内容。发送空字符串不应算作已输入任何值，除非空字符串可能是某些字段的有效值；但几乎从来没有这种情况。

于 2017-09-01T23:13:10.973 回答