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

Question

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?

Answer 1

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