Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

javascript - How to reset data and view of child input on click of parent's button click?

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

Tried solution 3

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

Tried solution 5

Possible solution

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...