Question

这不是调试问题，我们正在寻找有关问题的最佳解决方案的概念性指导

在我们的Angular 2 app中，我们有一个

<parent-component>，其中包含<form>
<form>有<level-1-child>
<level-1-child>有<level-2-child>
<level-2-child>有<textarea>

我们需要做什么？

重置<form>，<parent-component>＆amp;的<level-1-child>个元素。 <level-2-child>点击或提交<button>的{{1}}

<parent-component>

以下是issue re-producible

Answer 1

如果没有FormBuilder，实际重置会更难，但您可以执行以下操作：

父组件：

<form>
  <level-1 [val]="myVal"></level-1>
</form>

等级1：

<level-2 [val]="val"></level-2>

等级2：

<textarea [(ngModel)]="val.someProp"></textarea>

然后只需将@Input() val: any添加到level-1和level-2组件。

因此，当您“重置”时，您会将myVal对象重置为其原始值。这将对孩子们生效。

旁注：我不确定您是否必须更新对象引用以使其生效，但如果需要，您可以使用this.myVal = Object.assign({}, this.myVal)执行此操作。

提交时，您还应该在resetForm标记上致电<form>。如下所示：

<form #form="ngForm" (ngSubmit)="save()"></form>

@ViewChild('form') form;

save(): void {
  this.form.resetForm()
}

修改

使用FormBuilder你可以：

父组件：

public form: FormGroup = this.fb.group({ someProp: '' }); <form [formGroup]="form"> <level-1 [val]="form"></level-1> </form>

等级1：

<level-2 [val]="val"></level-2>

等级2：

<div [formGroup]="val"> <textarea formControlName="someProp"></textarea> </div>

然后使用this.form.reset()重置表单。

重置父表单上的子组件的输入字段提交

1 个答案: