从父组件重置表单

Question

我有一个组件,我有模块弹出窗口,其中包含子组件:

<modal data-backdrop="static" #modalTask (onDismiss)="modalTask.close()" [size]="'lg'">
    <modal-header>
        <h4 style="color:#fff">Add CRL Task</h4>
    </modal-header>
    <modal-body>
        <TaskComponent [isReset] ="resetForm" #tasks></crlTask>
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-primary" (click)="onTaskClick();">Create</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modalTask.close();">Cancel</button>
    </modal-footer>
</modal>

现在那个子组件如下:

<form #taskForm="ngForm" name="rplForm">
 //Contains Input Controls 
</form>

编辑

由于得到了一个解决方案,我将重置放在ngOnChanges子组件中.这是Child组件的代码

taskForm: FormGroup;
@Input() isReset: boolean = false;

ngOnChanges() {
        if (this.isReset) {
              this.rplForm.reset();
        }
    }

现在我节省taskForm了onTaskClick(),我能够这样做.我无法做的是重置子组件下的表单.

我试过用reset()但不能这样做.我可以从父组件中使用哪些东西？

Answer 1

根据您提供的更新，ngOnChanges您需要NgForm像使用模板驱动表单一样使用该指令。rplForm不是aFormGroup，您在这里甚至不需要它，因为它属于反应形式。所以你想要参考的是taskForm并重置它。rplForm这里是多余的。

您需要导入ViewChild才能引用您的表单，然后调用reset您的表单：

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

//...

@ViewChild('taskForm') myForm: NgForm;

ngOnChanges() {
  if (this.isReset) {
     this.myForm.reset();
  }
}