表单数据更改时视图不更新

Question

我在这里有一个 StackBlitz 演示，它显示了这个问题： https ://stackblitz.com/edit/demo-nested-forms

如果您等待 2 秒，表单将被一个 observable 填充，您可以在彩色块下方看到表单数据为 JSON。 如果您更改任一输入中的文本并单击它们，您可以看到表单数据得到更新。

如果然后单击“获取新表单数据”按钮，它会调用相同的 observable 以再次返回初始对象。 这一次，虽然表单数据被正确“重置”，但视图没有更新。

任何想法为什么视图现在不同步？

Answer 1

您不是将 formControlName 应用于控件本身，而是通过[value]属性设置文本区域的[value] 。 所以它第一次更新，但永远不会通过表单接收更新。

解决方法是将表单控件名称传递给子控件并将其应用于控件。 如果您这样做，您还需要在与表单控件名称相同的组件中应用[formGroup]指令，因此您也需要将其传入。

原版

孩子.html

<div>
  <textarea [value]="value">
  </textarea>
</div>

父.html

<div [formGroup]="form">
  <child formControlName="details" [value]="value">
  </child>
</div>

更新后的版本

孩子.html

<div [formGroup]"myFormGroup">
  <textarea [formControlName]="myFormControlName">
  </textarea>
</div>

child.ts

@Input() myFormControlName: string;
@Input() myFormGroup: FormGroup;

父.html

<div>
  <child [myFormGroup]="form" myFormControlName="details">
  </child>
</div>

我使用了与表单指令名称消除歧义的输入属性名称。 显然，您会希望使用更合理的名称。

分叉的stackblitz： https ://stackblitz.com/edit/demo-nested-forms-wplzbq

我在 fork 你的 stackblitz 的过程中破坏了变更处理。 但最重要的是这些值正在更新。