Reset form from parent component

Question

I have one component under which I have a modal popup containing a 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 this child component is as follows:

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

EDIT

As one solution was obtained, I set reset inside ngOnChanges child component. Here is the code from the child component

 taskForm: FormGroup; @Input() isReset: boolean = false; ngOnChanges() { if (this.isReset) { this.rplForm.reset(); } } 

Now I save taskForm to onTaskClick() , and I can do it. What I cannot do is reset the form that is under the child component.

I tried using reset() but could not do it. Anything I can do with the parent component?

Answer 1

Based on the update you provided with ngOnChanges , you need to use the NgForm directive as you are using a form with a template. rplForm not a FormGroup , you don’t even need it here, since this applies to reactive forms. So you want to reference taskForm and reset. rplForm is redundant here.

You need to import ViewChild in order to be able to link to your form, and then call reset in your form:

 import { ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; //... @ViewChild('taskForm') myForm: NgForm; ngOnChanges() { if (this.isReset) { this.myForm.reset(); } } 

Answer 2

create a theme and pass the change event to the parent component and listen to the child component for example:

// create one service for him and write this code

  onFormReset = new Subject<void>(); resetForm(): void { this.onFormReset.next(); } 

//component

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

Note. Add your service to the component designer

// parent html component

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

Child component

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

Answer 3

You need to use input as follows:

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 typescript component:

 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>