reset all inputs on angular 2 parent and child component

Question

I'm a Angular 2 newbie. After learning Angular 2, I made a demo app use parent and child component. The view of parent component has form element and a few inputs and view of child component has other inputs. This is my view of parent component

<form #f="ngForm" (ngSubmit)="onSubmit(f)"><div class="field clearfix w50" >
                    <label>Destination <span class="note">*</span></label>
                    <div [class.has-error]="is_draft_validated && !destination.value">
                        <input type="text" name="destination" [(ngModel)]="TRequest.destination" #destination="ngModel" class="form-control">
                        <span *ngIf="is_draft_validated && !destination.value" class="error">{{ 'VALIDATE.required' | translate }}</span>
                    </div>
                </div><payment-dietary *ngIf="TRequest.m_menu_request_id==9" [clear]="is_clear" [dietary]="TRequestDietary"></payment-dietary><button class="btn btn-style btn-style-special btn-chart" type="submit">
                        <i class="fa fa-bar-chart"></i>&nbsp;Save
                    </button>
                    <button class="btn btn-style btn-clear" (click)="onClear(f)">
                        <i class="fa fa-eraser"></i>&nbsp;Reset
                    </button></form>

And my view of child component

<div class="field clearfix w100">
        <label>Participant Name <span class="note">*</span></label>
        <div>
            <input type="text" name="participant_name" class="form-control" [(ngModel)]="Item.participant_name" #participant_name="ngModel" [class.ng-invalid]="participant_name?.dirty && !participant_name.value">
            <span *ngIf="participant_name?.dirty && !participant_name.value" class="error">{{ 'VALIDATE.required' | translate }}</span>
        </div>
    </div>
    <div class="field clearfix w50">
        <label>Participant Number <span class="note">*</span></label>
        <div>
            <input type="text" name="participant_num" class="form-control numeric" [(ngModel)]="Item.participant_num" (keyup)="Item.participant_num = $event.target.value" #participant_num="ngModel" [class.ng-invalid]="(participant_num?.dirty || participant_num?.touched) && !participant_num.value && !clear" id="form_participant_num">
            <span *ngIf="(participant_num?.dirty || participant_num?.touched) && !participant_num.value" class="error">{{ 'VALIDATE.required' | translate }}</span>
        </div>
    </div>

And child component code

import { Component, Input, AfterViewInit } from '@angular/core';
import { TRequestDietary } from '../../../../models';

@Component({
    selector: 'payment-dietary',
    templateUrl: './payment-dietary-form.component.html',
})

export class PaymentDietaryFormComponent{
    @Input('dietary') Item: TRequestDietary;
    @Input() clear: boolean;
}

When I press button to reset form, I can only reset input on view of parent but can not reset inputs on view of child component. This is the code reset form

onClear(form: NgForm){
form.reset();
}

I don't know how to reset inputs on child component. Please help me

score 3 · Answer 1 · answered Dec 30 '17 at 04:31

If you are using a child-parent combination then use a class of "TRequest" in parent. like

At parent Class define

public TRequest : TREQUEST;

And create a TREQUEST type class

class TREQUEST{
public Prop1:string ="";
public Prop2:number =null;
}

use it in templates and also in child. When need to reset

this.TRequest = new TREQUEST();

This new will reset your model by creating new instances.

Suraj Rao · Answer 2 · 2017-06-16T15:11:50.413

You have 'clear' boolean value sent to the child component. You could use this

Change in parent component:

onClear(form: NgForm){
this.is_clear=true;
form.reset();
}

You toggle the isClear of the child component in parent function. This is set in the parent template.

and in child component,

ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
 for (let propName in changes) {
if(propName==clear){
     //check for false to true and reset
}
}
}

ngOnChanges lifecyclehook is called when changes are detected in the component. Here you can detect the change of isClear variable from false value to true and reset the form in the child.

Can you give some explanation? – Zameer Ansari Jun 16 '17 at 14:24 — Zameer Ansari, Jun 16 '17 at 14:24

reset all inputs on angular 2 parent and child component

2 Answers2

Linked