1

我正在使用反应形式以 Angular 6 构建表单，并且我正在为每个部分使用组件，但我遇到了一些问题：如何在子组件中使用 FormArray 并在父组件中使用方法。例如：

在父 ts 文件中：

  constructor(private fb: FormBuilder, 
    private http: Http) { }

  ngOnInit() {

    this.parentForm = this.fb.group({
  _server: this.fb.array([this.initItemRows()]),
   })
 }


  initItemRows() {
    return this.fb.group({
      // DocumentID:  uuid(),
      HostName: [],
      IPAddress: [],
      Domain: [],
      OS: []
    });
}


  get serverForms() {
    return this.parentForm.get('_server') as FormArray
  }

  addServer() {

    const server = this.fb.group({ 
      // DocumentID:  uuid(),
      HostName: [],
      IPAddress: [],
      Domain: [],
      OS: []
    })

    this.serverForms.push(server);
  }

  deleteServer(i) {
    this.serverForms.removeAt(i)
  }

在父 html 中我有：

<div formArrayName="_server">
    <table id="_server" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Host name</th>
                <th>IP</th>
                <th>Domain</th>
                <th>OS</th>
                <th>action</th>
            </tr>
        </thead>
        <tbody>

            <tr *ngFor="let server of serverForms.controls; let i=index" [formGroupName]="i">
                <td>
                    <input formControlName="HostName" class="form-control" type="text" />
                </td>
                <td>
                    <input formControlName="IPAddress" class="form-control" type="text" />
                </td>
                <td>
                    <input formControlName="Domain" class="form-control" type="text" />
                </td>
                <td>
                    <input formControlName="OS" class="form-control" type="text" />
                </td>
                <td class="buttonCenter">
                    <button mat-raised-button color="primary" class="deleteFieldButton" (click)="deleteServer(i)" type="button">delete</button>
                </td>
            </tr>
        </tbody>
        <button mat-raised-button color="primary" class="addFieldButton" (click)="addServer()" type="button">insert row</button>

    </table>
</div>

但我想使用父（上）的所有 html 代码在子组件中

 <app-servers-section></app-servers-section>

我知道我可以在子组件中使用 FormGroupDirective，但是当我需要使用父方法时它不起作用。

请指教！谢谢！

4

1 回答 1

0

你需要做这样的事情。

 <app-servers-section (changeInChildForm)="doSomething($event)"></app-servers-section>

在要保留表单的子组件中，您需要从那里发出一个事件。

因此，在您的 ChildComponent.ts 中导入EventEmitter并使用 Component 和其他内容输出

import { Component, EventEmitter, Input, Output } from '@angular/core';

在 Class 的主体中，您可以执行类似的操作来发出要从子级传递给父级的事件。

@Output() changeInChildForm = new EventEmitter<boolean>();

  somethingHappenedInChild(data: any) {
    this.changeInChildForm.emit(data);
  }

因此，当您想从子组件发出更改时，请调用somethingHappenedInChild子组件的方法。changeInChildForm将发出，它将调用doSomething($event)父组件的方法。

我没有创建堆栈闪电战。但是，如果您在这方面需要更多帮助，请创建一个堆栈闪电战，就像前面提到的其他人一样。

于 2018-12-04T07:02:56.400 回答