Angular 响应式表单 - 重复对象

Question

我是 Angular 10 的新手（从 Angularjs 跳到 Angular），我遇到了一些问题

我在数据库中有多个这样的对象：

{
  "id" : 1,
  "search_name" : "example search name",
  "link" : "https://link",
  "label": {
    "label_uk" : "UK Label",
    "label_us" : "US Label",
    },
  "description" : {
    "description_uk": "",
    "description_us":""
  }
}

我正在尝试为每个对象构建一个重复表单，因此对于每个键，我需要在表单中进行编辑：示例：

formGroup.addControl('link', new FormControl(object.link));

我的问题：如何在不为其创建控件的情况下保留 id（因为我不会编辑它）？我应该为模型中的每个键创建控件吗？（我只想编辑一些）如何知道我的模型？

谢谢，如果我的问题不清楚，请见谅！

Answer 1

你可以选择这两种方法，创建一个具有所有“属性”的 FormGroup 的好处是，当你想创建一个新的“对象”时，允许你使用相同的 FormGroup。

例如一个功能如

getFormGroup(data:any=null)
{
   data=data || {id : 0, search_name : null,link:null,label:null,description:null}
   return new FormGroup({
      id:new FormControl(data.id),
      search_name:new FormControl(data.search_name),
      link:new FormControl(data.link),
      label:data.label?new FormGroup({
          label_uk:new FormControl(data.label.label_uk),
          label_us:new FormControl(data.label.label_us),
      }):
                       new FormGroup({
          label_uk:new FormControl(null),
          label_us:new FormControl(null),
      })
      description:data.description?new FormGroup({
          description_uk:new FormControl(data.description.description_uk),
          description_us:new FormControl(data.description.description_us),
      }):
                       new FormGroup({
          description_uk:new FormControl(null),
          description_us:new FormControl(null),
      })
     
   })
}

允许您使用

创建表单组

this.myForm=this.getFormGroup()  //an empty
this.myForm=this.getFormGroup(this.data)  //a data

但是，正如您所说，如果您有一个包含 40 个字段的对象并且您只需要更改其中的 5 个，那是不必要的。你可以使用两个函数

getNewFormGroup(){
   this.state="new"
   return .....
}

getUpdateFormGroup(data){
      this.state="update"
      return new FormGroup({
          search_name:new FormControl(data.search_name),
          link:new FormControl(data.link),
          label:new FormGroup({
              label_uk:new FormControl(data.label.label_uk),
              label_us:new FormControl(data.label.label_us),
          })
}

记住一个 FormGroup（如果你没有 html 输入，他的值存在事件）

Angular 响应式表单 - 重复对象

Angular Reactive Forms - Repeat objects

angular

angular-reactive-forms

angular10