Question

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

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

我的工作是将以下行添加到两个输入中：

(change)="form.controls.test.setValue(form.controls.test.value)

但说实话，这看起来是一个非常糟糕的解决方案。我在这里做错了吗？存档的正确方法是什么？

https://plnkr.co/edit/yALzCIHgOA463OvGi5rP

Answer 1

您可以使用ngModel：

<div>
    <form [formGroup]="form">
        <h2>Test = {{form?.controls.test.value}}</h2>
        1. <input type="text" formControlName="test" [(ngModel)]="test"> 
    2. <input type="text" formControlName="test" [(ngModel)]="test"> 
    3.
        <button type="button" (click)="form.controls.test.setValue('manual')">change with setValue</button>
    </form>
</div>

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

例如：

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

等于：

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

CODE EXAMPLE

Answer 2

我不确定为什么您只需要两个具有相同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>

有关更多详细信息（以及更深入的解释），您可以检查https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

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

2 个答案: