Javascript 将控件绑定到多个输入的角度反应窗体不会刷新其他控件

当我使用反应式表单并尝试在多个输入中访问同一个控件时，看起来它只是将输入数据绑定到模型的单向数据绑定。 如果我编辑一个输入，它将正确地更新模型，但不会刷新其他输入

<input type="text" formControlName="test" id="in1">
<input type="text" formControlName="test" id="in2">

但老实说，这看起来是一个相当糟糕的解决方案。我做错什么了吗？正确的归档方式是什么

您可以使用ngModel：

双向绑定语法实际上只是一种语法糖 属性绑定和事件绑定

例如：

<app-sizer [(size)]="fontSizePx"></app-sizer> 

等于：

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

---

我不知道为什么您需要两个完全相同formControlName的字段，但解决方案可以是-创建自定义角度元素

@Component({
  selector: 'custom-element',
  templateUrl: `
    <input type="text" [(ngModel)]="value">
    <input type="text" [(ngModel)]="value">
  `,
  styleUrls: ['./custom-element.component.css']
})
export class CustomElementComponent implements ControlValueAccessor

@Input() value: any 

writeValue(value: any) {
  // Some if statements
  this.value = value;
}

registerOnChange(fn: Function) {
  // your code here
}
registerOnTouched(fn: Function) {
  // your code here
}

和在父组件模板中

<custom-element formControlName="fieldname"></custom-element>

---

有关更多详细信息和更深入的解释，您可以检查

为什么要将两个输入同步到同一个控件？我不了解您的用例，也看不到它的实际应用。无论如何，我建议您阅读以下文档：。我相信在那之后你将能够回答你自己的问题。实现这一目标的正确方法是：不去做。将两个输入以相同形式输入的目的是什么？如果需要，可以制作两个表单[formGroup]可以引用同一个变量我想用几个不同的输入设置一个日期范围。我想允许用户从选择中选择一个月，或者使用日期选择器只选择一天。将反应式表单和模板表单formControlName和NGModel混合使用效果不好。感觉有点脏。特别是因为我必须创建一个新的模型字段测试，它与表单值是冗余的。这与我在更改事件中所做的基本相同。我希望通过单独选择月、日、年等来操作日期。但我的计划是在后台使用相同的值。我想如果没有你建议的自定义元素或者我的黑客，这是不可能的。

@Component({
  selector: 'custom-element',
  templateUrl: `
    <input type="text" [(ngModel)]="value">
    <input type="text" [(ngModel)]="value">
  `,
  styleUrls: ['./custom-element.component.css']
})
export class CustomElementComponent implements ControlValueAccessor

@Input() value: any 

writeValue(value: any) {
  // Some if statements
  this.value = value;
}

registerOnChange(fn: Function) {
  // your code here
}
registerOnTouched(fn: Function) {
  // your code here
}

<custom-element formControlName="fieldname"></custom-element>