时间戳

首页 > 解决方案 > Angular：自定义表单组件不会对值变化做出反应——比如 2 路数据绑定

angular - Angular：自定义表单组件不会对值变化做出反应——比如 2 路数据绑定

问题描述

因此，我正在创建自己的表单组件，该组件与本文中的问题类似

https://coryrylan.com/blog/angular-custom-form-controls-with-reactive-forms-and-ngmodel

我在那里分叉代码来说明这一点...... https://stackblitz.com/edit/angular-8afwjx?file=src/app/app.component.html

您可以看到在使用 ngModel 的地方，使用相同元素的另一个元素一直在更新....因为 2 路数据绑定

但是在反应式表单中，当我尝试使用 formControlName 时，当我切换控件（其中任何一个）时，表单会被更新，但另一个控件不会。

如何使我的自定义控件正确响应值更改？我需要订阅吗？我觉得很奇怪

标签： angularangular-reactive-formscontrolvalueaccessor

解决方案

您可以使用 formControl 指令将单个 formControl 实例绑定到多个输入。为了保持控件同步，我们可以设置表单控件的 value 属性。

<form [formGroup]="myForm" (ngSubmit)="submit()">
  <label for="switch-2">Reactive Forms</label>
  <app-switch id="switch-2" [value]="switchControl.value" [formControl]="switchControl"></app-switch>

  <label for="switch-2">Reactive Forms2</label>
  <app-switch id="switch-2" [value]="switchControl.value" [formControl]="switchControl"></app-switch>

  <hr />
  <button>Submit</button>

  <br />
  <h2>Form value</h2>
  {{ myForm.value | json }}
</form>

现场工作示例

您可以在 Corylan文章中查看更多信息

推荐阅读