为什么 ControlValueAccessor 不更新组件内的值？答案

【问题标题】：Why ControlValueAccessor doesn't update my value inside the component?为什么 ControlValueAccessor 不更新组件内的值？
【发布时间】：2020-01-09 17:24:19
【问题描述】：

为什么当我使用 ControlValueAccessor 时，值不会更新并以反应形式反映？

在我的应用程序中，我有一个表单：

 profileForm = new FormGroup({
    name: new FormControl(1),
  });

然后我使用 formControlName 将 name 从 profileForm 传递到 my-comp (ControlValueAccessor) 组件。

现在，当我单击应用程序组件中的按钮：changeValueFromMyApp 以使用 patchValue 将名称更改为 2 时，更新 profileForm 和 my-comp 组件内的值。（因为它调用了 writeValue 方法）。

但是当我在changeValueFromMyComp 按钮上单击my-comp 组件内部以将值更改为4 时，父级更改（profileForm）但更改不会反映到my-comp。为什么？这里缺少什么？如何让它发挥作用？

app.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template:`
    <form [formGroup]="profileForm">
      <my-comp formControlName="name"></my-comp>

    </form>

    form value: {{ profileForm.value | json }}
    <button (click)="changeValueFromMyApp()">changeValueFromMyApp</button>
  `

})
export class AppComponent  {
  profileForm = new FormGroup({
    name: new FormControl(1),
  });


  changeValueFromMyApp() {
    this.profileForm.patchValue({
      name: 2
    });
  }
}

my-comp.ts：

import { Component, forwardRef } from '@angular/core';
import { FormGroup, FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'my-comp',
  template:`
    value inside the component is: {{value | json}}

    <button (click)="changeValueFromMyComp()">change the value to 4</button>

  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyComp),
      multi: true
    }
  ]
})
export class MyComp implements ControlValueAccessor {

  value;
  onChange = () => {};
  onTouch = () => {};

  writeValue(value) {
    // this is happends when the parent change the value?
    this.value = value;
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouch(fn) {
    this.onTouch = fn;
  }

  changeValueFromMyComp() {
    this.onChange(4);
  }
}

【问题讨论】：

标签： angular

【解决方案1】：

您需要在此处更新变量“值”（my-comp.ts）：

changeValueFromMyComp() {
    this.onChange(4);
    this.value = 4;
}

onChange 函数不会自动更新值。

【讨论】：

很奇怪。当然我可以在本地更改值。但我认为这是双向数据绑定。所以这是有角度的方式？你能指出我在 angular.io 上提到这个问题的参考吗？
@JonSud，Soukyone 说你也需要更改“值”（MyComp 的变量）。是的，分两步：this.value=4;this.onChange(this.value)。当我们在组件外改变formControl的值时，writeValue给“value”赋值
我的意思是，你永远不会更新 MyComp 组件中的值，你只会调用 onChange，而 onChange 不会更新任何变量，它只是通知父组件。没有任何与'value'的绑定，你可以叫它'toto'，也一样。