емПриложение Angular 4у нас есть

<parent-component> который имеет<form><form> имеет<level-1-child><level-1-child> имеет<level-2-child><level-2-child> имеет<textarea>

Что нам нужно сделать?

Сбросить<form> элементы<parent-component>, <level-1-child> & <level-2-child> на<button> нажмите или отправьте<parent-component>«s<form>

<parent-component> выглядит так:

<form [formGroup]="myGroup" #f="ngForm" name="parent-component" (submit)="resetForm(f)" >    
    <input name="abc" id="abc" formControlName="abc">    
    <level-1-child [formGroup]="myGroup"></level-1-child>    
    <input type="submit" value="Reset form">
</form>

И<level-1-child> выглядит так:

<input name="abc" id="abc" formControlName="abc">    
<level-2-child [formGroup]="myGroup">
</level-2-child>

И<level-2-child> выглядит так:

<div [formGroup]="myGroup">
    <textarea formControlName="abc" id="abc" name="abc" [(ngModel)]="level-2-child.txt" >
    </textarea>
</div>

Кодparent-component.ts, level-1-child.ts & level-2-child.ts находится на следующих строках:

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'parent-component', //level-1-child, level-2-child
    templateUrl: 'parent-component.html' //level-1-child, level-2-child
})

export class ParentComponent {  //Level1Child, Level2Child
  myGroup = new FormGroup({abc: new FormControl()});
}

Этот код только сбрасываетinput#abc из<parent-component>, Что это за исправление?

Что мы уже пробовали?

Пробный раствор 1

Согласно@StepanZarubin«sпредложение,parent-component.ts это так:

resetForm(f) {    
    f.resetForm();    
}

с шаблоном<parent-component> как это:

<form #f="ngForm" (submit)="resetForm(f)" >
  <level-1-child>
    <level-2-child>
      <level-3-child>
        ...
          <level-n-child>
          </level-n-child>
        ...
      </level-3-child>
    </level-2-child>
  </level-1-child>
  <button type="submit"> Submit </button>
</form>

Шаблон из<level-n-child> является:

<input name="inp" id="inp" #inpField="ngModel" [(ngModel)]="childModel.inp">

Однако по какой-то причине это не сбрасываетinput#inp элемент<level-n-child>.

Пробный раствор 2

Мы не хотим использоватьboolean значение, отправленное ребенку

Пробный раствор 3

С помощьютакие вещи, как[parentFormGroup] приводит к ошибке:

Невозможно привязать к parentFormGroup, так как это не известное свойство level-n-child

когда пытался решить эту ошибку, используяREACTIVE_FORM_DIRECTIVES выдает еще одну ошибку:

[ts] Модуль '"node_modules / @ angular / forms / forms" "не имеет экспортированного члена REACTIVE_FORM_DIRECTIVES.

Тем не мение,мы уже используем последние и это не главная проблема.

Пробный раствор 4

Это похоже навход является решением, однако, поскольку есть много компонентов - мы не рассматриваем это предложение

Пробный раствор 5

Имена разные, поэтому это предложение выходит за рамки

Возможное решение

@PaulParton говорит огруппа формыМы не уверены, является ли это правильным решением или нет.

Мы не хотим помещать много грязного кода для ввода / вывода на этих компонентах.

Есть ли способ, которым мы можем использовать что-то вродеобщие службы за это?