代码之家 › 专栏 › 技术社区 › The Hungry Dictator

从父组件重置表单

angular-forms parent-child modal-dialog angular

The Hungry Dictator · 技术社区 · 7 年前

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

<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 子组件的。下面是来自子组件的代码

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

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

现在我在存钱 taskForm 在…上 onTaskClick() 我能够做到这一点。我不能做的是重置子组件下的表单。

我试过使用 reset() 但未能做到这一点。我可以从父组件中使用的任何东西?

3 回复 | 直到 7 年前

AT82 7 年前

根据您提供的更新 ngOnChanges 您需要使用 NgForm 指令,因为您正在使用模板驱动的表单。 rplForm 是不一 FormGroup ,这里甚至不需要它,因为它属于反应形式。所以你想引用的是 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();
  }
}

Shailesh Ladumor 7 年前

创建主题并将更改事件传递到父组件,并侦听子组件例如:

//为此创建一个服务并编写以下代码

 onFormReset = new Subject<void>();

   resetForm(): void {
     this.onFormReset.next();
   }

//组件

reset(): void{
   this.service.resetForm();
}

笔记将服务注入组件构造函数

//父组件html

<button type="button" class="btn btn-primary" (click)="reset();">Reset</button>

子组件

 ngOnInit(): void {
this.service.onFormReset.subscribe(()=>{
   reset your form here
);
}

Nour 7 年前

您需要使用以下输入:

父组件typescript文件:

private resetForm:boolean = false;

父组件html文件:

<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 #tasks [reset]="resetForm"></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>

您的子组件类型脚本:

import {Input, OnChanges} from '@angular/core';

@Input() reset:boolean = false;


ngOnChanges(){
   if(this.reset){
       //Here you can reset your form
   }
}

编辑

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