重置角度2父级和子级组件上的所有输入 [英] reset all inputs on angular 2 parent and child component

问题描述

我是Angular 2新手.学习了Angular 2之后，我制作了一个使用父级和子级组件的演示应用程序.父组件的视图具有表单元素和一些输入，子组件的视图具有其他输入.这是我对父组件的看法

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>

我对子组件的看法

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

当我按下按钮重置表单时，我只能重置父视图的输入，而不能重置子组件视图的输入.这是代码重置表格

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

推荐答案

如果您使用的是孩子与父母的组合，请在父母中使用"TRequest"类.喜欢

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

在父类中定义

public TRequest : 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.

这篇关于重置角度2父级和子级组件上的所有输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！