Question

我正在开发一个Angular自定义表单组件，该组件应该在整个对象模型的某些部分上工作，而其他标准表单组件则在同一模型的其他部分上工作。

为此，我已经使用this Thoughtram blogpost作为模型来实现ControlValueAccessor。

出于某种原因，尽管出于某种原因，该组件内部的标准控件正在更新，但是当相同形式的另一个组件对模型进行突变时，不会为该组件调用writeValue（）。

This stackblitz example（基于Thoughtram的帖子）说明了该问题：

CounterInput1Component收到outerModel.integer作为其ngModel，并对其进行操作。

CounterInput2Component接收整个outerModel，然后对integer属性进行操作。

当整数通过标准输入控件或Counter2递增时，writeValue()被Counter1调用。

对于Counter2，无论是从writeValue()还是从标准输入控件进行递增，Counter1在实例化时被调用两次（两次），但此后再也不会被调用。

为什么没有为Counter2调用writeValue()？尽管如此，如何通知其内部组件？

Answer 1

这不是您的自定义控件形式的问题，请记住，更改对象的属性时对象不会更改。您需要更改所有对象

例如您的输入就像

<input name="standardInput" 
     [ngModel]="outerModel.integer" 
     (ngModelChange)="outerModel={integer:$value}" />

或按钮

<button (click)="outerModel={integer:20}">click</button>

声明： writeValue仅在更改“对象”时发生，并且在任何控件中都发生。请参阅在stackblitz

中使用formControl的示例

这是一个简单的formControl，

  form=new FormControl(this.data)
  ngOnInit()
  {
    this.form.valueChanges.subscribe(res=>{
      this.counter++
      console.log(res)
    })
  }
  click()
  {
   this.data.integer++
  }
    change()
  {
   this.data.integer++
   this.form.setValue(this.data);
  }

<pre>
{{form.value |json}}
Counter changes:{{counter}}
</pre>
<button (click)="click()">click</button>
<button (click)="change()">change</button>

我们无法考虑，因为对象在组件的内部和外部都是相同的，因此属性发生了变化，您可以看到实际值，但是重复一次，就没有变化

模型变异时不调用Angular ControlValueAccessor writeValue（）

1 个答案: