Как использовать FormArray в дочернем компоненте с методами внутри родительского

Я создаю форму в 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 внутри дочернего компонента, но он не работает, когда мне нужно использовать родительские методы.

Пожалуйста посоветуй! Спасибо!


angular angular-reactive-forms formgroups angular6
person Livnat Menashe    schedule 04.12.2018    source источник
comment
ты можешь создать stackblitz?   -  person Chellappan வ    schedule 04.12.2018
comment
@Chellappan Я создал проект, но он не работает: stackblitz.com/edit/angular-uxzwkn   -  person Livnat Menashe    schedule 04.12.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно сделать что-то подобное.

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

а в дочернем компоненте, где вы хотите сохранить свою форму, вам нужно создать событие оттуда.

Итак, в вашем ChildComponent.ts импортируйте EventEmitter и Output с компонентом и другими вещами

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

и в теле класса вы можете сделать что-то вроде этого, чтобы испустить событие, которое вы хотите передать родительскому элементу из дочернего.

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

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

Итак, если вы хотите передать изменение от дочерних элементов, вызовите метод somethingHappenedInChild дочернего компонента. changeInChildForm будет испущен, он вызовет метод doSomething($event) родительского компонента.

Я не создавал стекблиц. Но если вам нужна дополнительная помощь по этому поводу, создайте один стек, как упоминалось ранее.

person Sadid Khan    schedule 04.12.2018
comment
Спасибо за вашу помощь .. Я создал проект, но он не работает: stackblitz.com/edit/angular-uxzwkn < / а> - person Livnat Menashe; 04.12.2018