重置 Angular 2 父子组件上的所有输入答案

【问题标题】：reset all inputs on angular 2 parent and child component重置 Angular 2 父子组件上的所有输入
【发布时间】：2017-04-30 14:07:22
【问题描述】：

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

当我按下按钮重置表单时，我只能在父组件视图上重置输入，但不能在子组件视图上重置输入。这是代码重置表单

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

我不知道如何重置子组件的输入。请帮帮我

【问题讨论】：

标签： angular

【解决方案1】：

如果您使用的是子-父组合，则在父级中使用“TRequest”类。喜欢

在父类定义

public TRequest : TREQUEST;

并创建一个 TREQUEST 类型类

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

在模板和孩子中使用它。何时需要重置

this.TRequest = new TREQUEST();

这个新功能将通过创建新实例来重置您的模型。

【讨论】：

【解决方案2】：

您已将“清除”布尔值发送到子组件。你可以使用this

父组件的变化：

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

您在父函数中切换子组件的isClear。这是在父模板中设置的。

在子组件中，

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

ngOnChangeslifecyclehook 在组件中检测到更改时被调用。在这里您可以检测到isClear 变量从 false 值到 true 的变化，并在 child 中重置表单。

【讨论】：

你能解释一下吗？