如何在单击父按钮单击时重置数据和子输入视图？

Question

在我们的Angular 4 app 中，我们有一个

• <parent-component> 其中有一个 <form>
• <form> 有<level-1-child>
• <level-1-child> 有<level-2-child>
• <level-2-child> 有<textarea>

我们需要做什么？

• 在<button>点击或提交<parent-component>的<form>上的<parent-component>、<level-1-child>和<level-2-child>的<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()});
}

此代码仅重置<parent-component> 的input#abc。有什么办法解决这个问题？

到目前为止我们已经尝试过什么？

尝试解决方案 1

根据@StepanZarubin的suggestion，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">

但是由于某种原因，这不会重置<level-n-child> 的input#inp 元素。

已尝试解决方案 2

• 我们不想使用boolean value sent to the child

尝试解决方案 3

• 使用stuff like [parentFormGroup] 会导致错误：

无法绑定到“parentFormGroup”，因为它不是“level-n-child”的已知属性

当尝试使用 REACTIVE_FORM_DIRECTIVES 解决此错误时会引发另一个错误：

[ts] 模块“node_modules/@angular/forms/forms”没有导出成员“REACTIVE_FORM_DIRECTIVES”。

不过，we're already using the latest 这不是主要问题。

尝试解决方案 4

• 好像input is the solution, however since there are lot of components - we're not considering this suggestion

已尝试解决方案 5

• The names are distinct, so this suggestion is out of scope

可能的解决方案

• @PaulParton 正在谈论 form group，我们不确定这是否是正确的解决方案。

我们不希望在这些组件上放置大量用于输入/输出的杂乱代码。

我们有没有办法为此使用共享服务之类的东西？

Answer 1

要使用“空”数据初始化表单，我执行以下操作：

initializeProduct(): IProduct {
    // Return an initialized object
    return {
        id: 0,
        productName: null,
        productCode: null,
        tags: [''],
        releaseDate: null,
        price: null,
        description: null,
        starRating: null,
        imageUrl: null
    };
}

然后绑定到初始化的产品。

您可以在此处找到完整示例：https://github.com/DeborahK/Angular2-ReactiveForms（特别是 APM 文件夹）。

此代码适用于我在 Pluralsight 上的“Angular Reactive Forms”课程，如果您想了解有关其构建方式的更多详细信息：https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents