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

Question

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

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

• <parent-component> 有一个 <form>
• <form> 有<level-1-child>
• <level-1-child> 有<level-2-child>
• <level-2-child> 有<textarea>

我们需要做什么？

• 在<button>点击或提交<parent-component>的<form>上的<parent-component>、<level-1-child>和<level-2-child>的<form>元素

这里是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) 执行此操作。

您还应该在提交时在<form> 标签上调用resetForm。所以像：

<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()重置表单。