Question

我在角度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？

Answer 1

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

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的自定义逻辑。

我建议您修复服务器。空字符串通常是“未输入”，而不是“格式错误”或其他内容。发送空字符串不应计入任何已输入的值，除非空字符串可能是某些字段的有效值;但事实并非如此。

Answer 2

好的答案LazarLjubenović，但没有其他方法可以使角色变成这样吗？使用其他表单类型，例如模板驱动表单和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;
}

Angular 2中的ReactiveForms为我的可选字段

2 个答案: