如何重置父母的按钮点击点击数据和查看孩子输入？ [英] How to reset data and view of child input on click of parent's button click?

问题描述

在我们的 Angular 4应用中，我们有一个

• < parent-component> 它有一个< form> 具有< level-1-child> < level-1-child> 具有< level-2- < level-2-child> 有< / li>

• < ; textarea>



我们需要做什么？

• 重置< parent-component>的< form> 元素; ，< level-1-child> & < level-2-child> 关于<按钮> 点击或提交< ;父组件> 的< form>

$ b $
$ b

   >< form [formGroup] =myGroup＃f =ngFormname =parent-component（submit）=resetForm（f）> 
< input name =abcid =abcformControlName =abc> 
 < input type =submitvalue =重置表单> 
< / form> 
  

以及< level-1-child> 看起来像这样：

 < input name =abcid =abcformControlName =abc> 
 < / level-2-child> 
  

而< level-2-child> 看起来像这样：

 < div [formGroup] =myGroup> 
< textarea formControlName =abcid =abcname =abc[（ngModel）] =level-2-child.txt> 
< / textarea> 
< / div> 
  

parent-component.ts ， level-1-child.ts & level-2-child.ts 的内容如下：

 从'@ angular / core'导入{Component，OnInit}; 
从'@ angular / forms'导入{ReactiveFormsModule，FormGroup，FormControl}; 
 
 @Component（{
 moduleId：module.id，
 selector：'parent-component'，// level-1-child，level-2-child 
 templateUrl：'parent-component.html'// level-1-child，level-2-child 
}）
 
导出类ParentComponent {// Level1Child，Level2Child 
 myGroup = new FormGroup（{abc：new FormControl（）}）; 
} 
  

这段代码只是重置 input＃abc < parent-component> 。

我们到目前为止所尝试过的是什么？

<尝试解决方案1 ​​

按照 @StepanZarubin 的建议， 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>提交< /按钮> 
< / form> 
  

模板< level-n-child>



 < input name =inpid =inp＃inpField =ngModel[（ ngModel）] = childModel.inp > 
  

然而由于某些原因，这并没有重置输入＃inp < level-n-child> 。

试过的解决方案2

• 我们不想使用 boolean 发送给孩子的值
  
  
  

  尝试的解决方案3

  
  
  
  
  
  • 使用像 [parentFormGroup] 这样的内容会导致错误：
    
  
  
  < blockquote>
  

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

  
  

  使用 试图解决此错误时， REACTIVE_FORM_DIRECTIVES 会抛出另一个错误：
  
  

  
  

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

  我们已经在使用最新的，这不是主要问题。

  
  
  

  尝试过的解决方案4
  
  

  
  
  • 看起来像 input是解决方案，但是由于有很多组件，我们没有考虑这个建议
  
  
  
  
  

  尝试过的解决方案5
  
  

  
  
  • 名称不同，因此此建议超出范围 可能的解决方案
    
    
    
    
    
    • @PaulParton
      a>正在讨论表单组，我们不确定这是否是正确的解决方案。
    
    
    
    
    

    我们不希望在这些组件上输入/输出很多杂乱的代码。

    
    
    

    有没有一种方法可以使用像共享服务这样的东西？
    

    解决方案

    要用空数据初始化表单，我会这样做：
    
    

      initializeProduct（）：IProduct {
     //返回一个初始化对象
     return {
     id：0，
     productName：null，$ b $ productCode：null，
    标签：['']，
     releaseDate：null，
    价格：null，
    描述：null，
     starRating：null，$ b $ 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

    
    

    In our Angular 4 app, we've a

    • <parent-component> which has a <form>
    • The <form> has <level-1-child>
    • The <level-1-child> has <level-2-child>
    • The <level-2-child> has <textarea>

    What we need to do?

    • Reset the <form> elements of <parent-component>, <level-1-child> & <level-2-child> on <button> click or submit of <parent-component>'s <form>

    <parent-component> looks like this:

    <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>
    

    And the <level-1-child> looks like this:

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

    And the <level-2-child> looks like this:

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

    The code of parent-component.ts, level-1-child.ts & level-2-child.ts is on the following lines:

    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()});
    }
    

    This code is only resetting the input#abc of <parent-component>. What is the fix for this?

    What we have tried so far?

    Tried solution 1

    As per @StepanZarubin's suggestion, the parent-component.ts is like this:

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

    with template <parent-component> like this:

    <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>
    

    The template of <level-n-child> is:

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

    However for some reason, this is not resetting the input#inp element of <level-n-child>.

    Tried solution 2

    • We do not want to use boolean value sent to the child

    Tried solution 3

    • Using stuff like [parentFormGroup] is resulting in an error:

    Can't bind to 'parentFormGroup' since it isn't a known property of 'level-n-child'

    when tried to solve this error using REACTIVE_FORM_DIRECTIVES throws another error:

    [ts] Module '"node_modules/@angular/forms/forms"' has no exported member 'REACTIVE_FORM_DIRECTIVES'.

    However, we're already using the latest and this is not the main problem.

    Tried solution 4

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

    Tried solution 5

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

    Possible solution

    • @PaulParton is talking about form group, we're not sure as to if this is the correct solution or not.

    We don't wish to put a lot of messy code for input/outputs on these components.

    Is there a way we can use something like shared services for this?

    解决方案

    To initialize a form with "empty" data, I do something like this:

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

    And then bind to the initialized product.

    You can find a complete example here: https://github.com/DeborahK/Angular2-ReactiveForms (specifically the APM folder).

    This code is for my "Angular Reactive Forms" course on Pluralsight if you want to see more details on how it was built: https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents

    这篇关于如何重置父母的按钮点击点击数据和查看孩子输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！