Reputation: 3484
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
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
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
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
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