Question

我在项目中使用Angular 4.3.1。生成嵌套表单时，我遇到了问题。我的层次结构是这样的。下面的代码给我类似

的错误

找不到具有以下路径的控件：“ interface2-> interface2Name”（对于所有字段）

this.myForm = new FormGroup({
  hsrp: new FormGroup({
    name: new FormControl(''),
    description: new FormControl('')
  }),
  interface1: new FormGroup({
    interface1Name: new FormControl(''),
    state: new FormControl('')
  }),
  interface2: new FormGroup({
    interface2Name: new FormControl(''),
    state: new FormControl('')
  })
});

html模板（我正在使用ngx-datatable）

<ngx-datatable-row-detail [rowHeight]="175" #myDetailRow>
            <ng-template let-row="row" ngx-datatable-row-detail-template>
                <!--<ng-template let-rowGroup="cuurRowDetail" [ngTemplateOutletContext]="{ cuurRowDetail: (getRowGroups(row) | keyValueUnsorted) }"
                 [ngTemplateOutlet]="selfie" #selfie>-->
                <div class="custom-datatable-row-detail">
                    <form autocomplete="off" class="detail-info-form" [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
                        <div class="row no-gutters group-outer-wrapper">
                            <div *ngFor="let group of row.groups; let outerIndex=index;" class="group-wrapper group-col group-col-{{group.length}}">
                                <div class="group-inner-wrapper">
                                    <div class="group-name ml-2 px-2 d-inline-block font-weight-bold">{{group.key | humanize}}</div>
                                    <div class="mt-1" formGroupName="{{group.key}}">
                                        <div *ngFor="let gfield of group.value ; let i=index;" class="form-group clearfix" [style.z-index]="(20 - i)">
                                            <label for="{{gfield.fieldName}}" class="pr-1 mb-0 detail-row-label float-left text-right">
                                                <span class="d-inline-block row-detail-value-middle row-detail-small-font" title="{{gfield.fieldName | humanize}}">{{gfield.fieldName
                                                    | humanize}}</span>
                                            </label>
                                            <span class="d-inline-block float-left row-detail-value-middle row-detail-small-font">: </span>
                                            <div class="pl-1 row-detail-value-wrapper float-left">
                                                <div class="row-detail-value">
                                                    <div *ngIf="currentEditableRowId !== row.id; else paramInput" class="row-detail-value">
                                                        <span class="row-detail-value-text  row-detail-value-middle d-inline-block ellipsis" title="{{gfield.value}}">{{gfield.value}}</span>
                                                    </div>
                                                    <ng-template #paramInput>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control form-control-sm w-100 text-left" placeholder="{{gfield.fieldName | humanize}}" formControlName="{{gfield.fieldName}}"
                                                             name="{{gfield.fieldName}}" />
                                                        </div>
                                                    </ng-template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!--</ng-template><!-->
            </ng-template>
        </ngx-datatable-row-detail>

其中行是数组，每行表示循环对象

[
  {
    "id": "add-record",
    "name": "",
    "description": "",
    "interface1Name": "",
    "interface2Name": "",
    "groups": [
      {
        "key": "hsrp",
        "value": [
          {
            "fieldName": "id",
            "value": "",
            "group": "hsrp"
          },
          {
            "fieldName": "name",
            "value": "",
            "group": "hsrp"
          },
          {
            "fieldName": "description",
            "value": "",
            "group": "hsrp"
          }
        ]
      },
      {
        "key": "interface1",
        "value": [
          {
            "fieldName": "interface1Name",
            "value": "",
            "group": "interface1"
          },
          {
            "fieldName": "state",
            "value": "",
            "group": "interface1"
          }
        ]
      },
      {
        "key": "interface2",
        "value": [
          {
            "fieldName": "interface2Name",
            "value": "",
            "group": "interface2"
          },
          {
            "fieldName": "state",
            "value": "",
            "group": "interface2"
          }
        ]
      }
    ]
  },
  {
    "id": "100",
    "name": "name-trst",
    "interface1Name": "interface1Name-trst",
    "interface2Name": "interface2Name-trst",
    "description": "description-trst",
    "groups": [
      {
        "key": "hsrp",
        "value": [
          {
            "fieldName": "id",
            "value": "100",
            "group": "hsrp"
          },
          {
            "fieldName": "site",
            "value": "lon",
            "group": "hsrp"
          },
          {
            "fieldName": "name",
            "value": "name-trst",
            "group": "hsrp"
          },
          {
            "fieldName": "description",
            "value": "description-trst",
            "group": "hsrp"
          }
        ]
      },
      {
        "key": "interface1",
        "value": [
          {
            "fieldName": "instance1Name",
            "value": "esxi.lon",
            "group": "interface1"
          },
          {
            "fieldName": "interface1Name",
            "value": "interface1Name-trst",
            "group": "interface1"
          },
          {
            "fieldName": "state",
            "value": "state-trst",
            "group": "interface1"
          }
        ]
      },
      {
        "key": "interface2",
        "value": [
          {
            "fieldName": "instance2Name",
            "value": "esxi.lon",
            "group": "interface2"
          },
          {
            "fieldName": "interface2Name",
            "value": "interface2Name-trst",
            "group": "interface2"
          },
          {
            "fieldName": "state",
            "value": "trst",
            "group": "interface2"
          }
        ]
      }
    ],
    "$$index": 0
  },
  {
    "id": "101",
    "name": "name-trst22",
    "interface1Name": "interface1Name-trst22",
    "interface2Name": "interface2Name-trst22",
    "description": "description-trst222",
    "groups": [
      {
        "key": "hsrp",
        "value": [
          {
            "fieldName": "id",
            "value": "101",
            "group": "hsrp"
          },
          {
            "fieldName": "site",
            "value": "lon",
            "group": "hsrp"
          },
          {
            "fieldName": "name",
            "value": "name-trst22",
            "group": "hsrp"
          },
          {
            "fieldName": "description",
            "value": "description-trst222",
            "group": "hsrp"
          }
        ]
      },
      {
        "key": "interface1",
        "value": [
          {
            "fieldName": "instance1Name",
            "value": "esxi.lon",
            "group": "interface1"
          },
          {
            "fieldName": "interface1Name",
            "value": "interface1Name-trst22",
            "group": "interface1"
          },
          {
            "fieldName": "state",
            "value": "state-trst22",
            "group": "interface1"
          }
        ]
      },
      {
        "key": "interface2",
        "value": [
          {
            "fieldName": "instance2Name",
            "value": "esxi.lon",
            "group": "interface2"
          },
          {
            "fieldName": "interface2Name",
            "value": "interface2Name-trst22",
            "group": "interface2"
          },
          {
            "fieldName": "state",
            "value": "trst222",
            "group": "interface2"
          }
        ]
      }
    ],
    "$$index": 1
  }
]

hsrp，interface1和interface 2都是部分，每个都有一些字段。现在，我很困惑，我应该如何为此需求生成FormGroup。什么时候使用FormArray和什么时候使用FormGroup？

谢谢。

Answer 1

这个灵魂对我有用

添加了new Vue ({ el: '#skill', data () { return { skill:{title:'',items:''}, skills: [ { id: 1, title: 'css', items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>', }, { id: 2, title: 'js', items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>', }, { id: 3, title: 'html', items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>', }, { id: 4, title: 'general', items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>', }, { id: 5, title: 'tools', items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>', } ] } }, methods: { show(x){ for (var i =0; i<=this.skills.length; i++) { if (x == this.skills[i].id){ this.skill.title = this.skills[i].title; this.skill.items = this.skills[i].items; } } } } });

FormArray

html;

this.formGroupObj = new FormGroup({
      hsrp: new FormArray([
        new FormGroup({
          name: new FormControl('asdasd'),
          description: new FormControl('sadasd')
        })
      ]),
      interface1: new FormArray([
        new FormGroup({
          interface1Name: new FormControl('dsad'),
          state: new FormControl('asdasd')
        })
      ]),
      interface2: new FormArray([
        new FormGroup({
          interface2Name: new FormControl('asda'),
          state: new FormControl('asdsad')
        })
      ])
    });

角度4：嵌套的表单字段：找不到带有路径的控件

1 个答案: