CODEWITHSUNDEEP
angularmodal-dialogparent-childangular-forms
The Hungry Dictator
The Hungry Dictator

Reputation: 3484

Reset form from parent component

I have one component under which I have modal popup which contains child component :

<modal data-backdrop="static" #modalTask (onDismiss)="modalTask.close()" [size]="'lg'">
    <modal-header>
        <h4 style="color:#fff">Add CRL Task</h4>
    </modal-header>
    <modal-body>
        <TaskComponent [isReset] ="resetForm" #tasks></crlTask>
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-primary" (click)="onTaskClick();">Create</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modalTask.close();">Cancel</button>
    </modal-footer>
</modal>

Now that child component is as follows :

<form #taskForm="ngForm" name="rplForm">
 //Contains Input Controls 
</form>

EDIT

As got one solution I have put reset inside ngOnChanges of child component. Here is the code from Child component 

taskForm: FormGroup;
@Input() isReset: boolean = false;

ngOnChanges() {
        if (this.isReset) {
              this.rplForm.reset();
        }
    }

Now I am saving taskForm on onTaskClick() and I am able to do so. What I am not able to do is to resetting the form which is under child component.

I tried using reset() but was not able to do so. Anything using which I can do so from parent component?

Upvotes: 7

Views: 14891

Answers (4)

PKS
PKS

Reputation: 773

in the HTML page

 <child
   #ngRefInput
   (onInputChange)="onChange($event)"
    [config]="otpConfig">
 </child>

In the TS file

onChange{
this.ngRefInput.yourForm.reset();
}

Upvotes: 0

AVJT82
AVJT82

Reputation: 73387

Based on the update you have provided with ngOnChanges is that you need to use the NgForm directive as you are using a template driven form. rplForm is not a FormGroup, you don't even need it here, as that belongs with reactive forms. So what you want to reference is taskForm and reset that. rplForm is redundant here.

You need to import ViewChild to be able to reference your form, then call reset on your form:

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

//...

@ViewChild('taskForm') myForm: NgForm;

ngOnChanges() {
  if (this.isReset) {
     this.myForm.reset();
  }
}

Upvotes: 3

Nour
Nour

Reputation: 5889

You need to use input as follow:

Your parent component typescript file:

private resetForm:boolean = false;

Your parent component html file:

<modal data-backdrop="static" #modalTask (onDismiss)="modalTask.close()" [size]="'lg'">
<modal-header>
    <h4 style="color:#fff">Add CRL Task</h4>
</modal-header>
<modal-body>
    <TaskComponent #tasks [reset]="resetForm"></crlTask>
</modal-body>
<modal-footer>
    <button type="button" class="btn btn-primary" (click)="onTaskClick();">Create</button>
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modalTask.close();">Cancel</button>
</modal-footer>

Your child component typescript:

import {Input, OnChanges} from '@angular/core';

@Input() reset:boolean = false;


ngOnChanges(){
   if(this.reset){
       //Here you can reset your form
   }
}

Edit

 <form #taskForm="ngForm" name="rplForm" [formGroup]="rplForm">
   //Contains Input Controls 
 </form>

Upvotes: 0

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7252

create subject and pass change event into parent component and listen into child component for example:

// create one service for that and write this code

 onFormReset = new Subject<void>();

   resetForm(): void {
     this.onFormReset.next();
   }

// component 

reset(): void{
   this.service.resetForm();
}

Note. Inject your service into component constructor

// parent component html

<button type="button" class="btn btn-primary" (click)="reset();">Reset</button>

Child component

 ngOnInit(): void {
this.service.onFormReset.subscribe(()=>{
   reset your form here
);
}

Upvotes: 0

Related Questions