Question

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

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

Answer 1

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

在父类定义

public TRequest : TREQUEST;

创建一个TREQUEST类型类

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

在模板和儿童中使用它。何时需要重置

this.TRequest = new TREQUEST();

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

Answer 2

您有'clear'布尔值发送到子组件。您可以使用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的更改，并重置子项中的表单。

重置角度2父级和子级组件

2 个答案: