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

Posted 2023-03-13

【中文标题】如何在单击父按钮单击时重置数据和子输入视图？

【英文标题】：How to reset data and view of child input on click of parent's button click?

【发布时间】：2017-11-19 16:38:36

【问题描述】：

在我们的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，我们不确定这是否是正确的解决方案。

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

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

【问题讨论】：

仅供参考，REACTIVE_FORMS_DIRECTIVES 在 Angular 2 RC6 中已被弃用和删除。您需要改为导入 ReactiveFormsModule。此外，任何包含输入元素的嵌套组件（例如<level-1-child>，默认情况下不被视为父表单的一部分。您需要手动通知嵌套组件它们是表单的成员。（这是您链接到的解决方案是：“我们没有考虑这个建议。）那么重置可能会起作用吗？

@DeborahK 那么我们如何通知嵌套组件它们是表单的成员？

您可以继续向下传递表单组。或者，您可以查看是否有其他方法来构建表单，而无需深入到这么多级别。也许你可以构建一个<level-child>，它可以支持任何级别，而不是有这么多嵌套组件。

@DeborahK 请检查我更新的问题。我已将表单传递给子级别，但仍然看起来不太好。你能解释一下的概念吗？

澄清一下，在您的问题中重置是什么意思？ .reset 方法只重置表单状态。它不会清除数据。这是你的意思吗？如果您想清除数据，无论您使用任何其他表单技术，都必须手动执行。

【参考方案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

【讨论】：

这是我正在做的事情，但问题是我如何让子组件知道父组件希望它的 IProduct 变空？

您如何共享数据？如果数据在所有子组件之间共享，那么父组件可以简单地将绑定属性设置为已初始化的产品，然后绑定将处理其余部分。

我认为我们的应用程序中没有任何绑定属性，所有孩子都可以访问。

有什么方法可以根据您的场景的基础构建一个 plunker，我们可以看看吗？仅笼统地说，越来越难以协助进一步讨论。

我已经在plunk分享了可重现性