Angular 2 中的 ReactiveForms 为我的可选字段生成具有空值或空对象的 JSON

Question

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

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

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

但我希望这个 JSON 与 API 一致。（如果有空或 null property/object 我得到一个错误，因为字段存在但无效：

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

我用这个来作弊，但它太脏了...:[=16=]

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 然后。

我怎样才能直接 JSON clean JSON 而没有 null 或空值？

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.

我建议你修复服务器。空字符串通常是 "not entered"，而不是 "wrong format" 或其他。发送空字符串不应算作已输入任何值，除非空字符串可能是某些字段的有效值；但这种情况几乎没有。

Answer 2

好吧，你的回答 Lazar Ljubenović 但是在 angular 中没有其他方法可以做到这一点吗？使用其他表单类型，例如模板驱动表单和 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 为我的可选字段生成具有空值或空对象的 JSON

ReactiveForms in Angular 2 generate JSON with empty value or empty object for my optional field

angular

angular-reactive-forms