角度2の親子コンポーネントのすべての入力をリセットする

Question

私は角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(); 
} 

子コンポーネントの入力をリセットする方法がわかりません。助けてください

Answer 1

子コンポーネントに送られたブール値が「クリア」です。

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

あなたは親関数内の子コンポーネントのisClearを切り替える： あなたは親コンポーネントでthis

変更を使用することができます。これは、親テンプレートで設定されます。

及び変更がコンポーネントで検出された場合、子コンポーネントに、

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に検出し、子フォームをリセットできます。

Answer 2

子 - 親の組み合わせを使用している場合は、親に "TRequest"のクラスを使用してください。親クラスで

よう

public TRequest : TREQUEST; 

を定義し、

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

TREQUEST型クラスを作成することは、テンプレートにしても、子供にそれを使用します。 ときは、この新しい、新しいインスタンスを作成することによって、あなたのモデルをリセットします

this.TRequest = new TREQUEST(); 

をリセットする必要があります。