重置角度2父组件和子组件上的所有输入

我是Angular 2的新手。在学习Angular 2之后，我做了一个使用父子组件的演示程序。父组件的视图具有表单元素并且少量输入和子组件的视图具有其他输入。这是我的父组件重置角度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(); 
}

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

来源

2016-12-15 phongphu10

你有'清除'布尔值发送到子组件。你可以使用在父组件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 
} 
} 
}

ngOnChanges lifecyclehook被调用。在这里，您可以检测到isClear变量从false值更改为true并将子窗体重置。

来源

2016-12-15 05:22:14

你能给一些解释吗？ – xameeramir

希望它很清楚..不知道你的查询是什么 –

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

在父类中定义

public TRequest : TREQUEST;

，并创建一个TREQUEST型类

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

使用它的模板，也可以在孩子。当需要重置

this.TRequest = new TREQUEST();

这个新将创建新实例重置您的模型。

来源

2017-12-30 04:31:38

重置角度2父组件和子组件上的所有输入

回答

相关问题