重置角度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父組件和子組件上的所有輸入

回答

相關問題