Reset все входы на angular 2 родительских и дочерних компонентах

Я новичок Angular 2. Изучив Angular 2, я сделал демонстрационное приложение, использующее родительский и дочерний компоненты. Представление родительского компонента имеет элемент формы, а несколько входов и представление дочернего компонента имеют другие входные данные. Это мой взгляд на родительский компонент

<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>

И мой взгляд на дочерний компонент

<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>

И код дочернего компонента

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;
}

Когда я нажимаю кнопку до формы reset, я могу использовать только вход reset в представлении родителя, но не может reset входы на просмотр дочернего компонента. Это код reset

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

Я не знаю, как входы reset для дочернего компонента. Пожалуйста, помогите мне

Ответ 1