Reset form from parent component
Asked Answered
M

4

7

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?

Mae answered 8/2, 2018 at 8:53 Comment(0)
O
3

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();
  }
}
Outofdoors answered 8/2, 2018 at 17:9 Comment(4)
rplForm is taskForm. That was a mistake that I have updated.Mae
Although I tried it yesterday it was not working, But somehow started working today. Maybe I was doing something wrong. Thanks for the answerMae
Maybe some magic happened over night :D Well, but glad to hear you got it working :)Outofdoors
Seems like that so. :DMae
H
0

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
);
}
Heiduc answered 8/2, 2018 at 9:16 Comment(1)
Other than using services?Mae
R
0

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>
Rashidarashidi answered 8/2, 2018 at 9:36 Comment(6)
Not happening. Tried itMae
Strange, did you implement OnChanges on your child component ?Rashidarashidi
I did check it and it goes inside the ngOnChanges as well but still not happeningMae
Could you apply the inside the ngOnChanges pleaseRashidarashidi
Updated the question please checkMae
Yes I am using reactive formMae
A
0

in the HTML page

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

In the TS file

onChange{
this.ngRefInput.yourForm.reset();
}
Aime answered 1/11, 2022 at 5:39 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.