Angular 反应式表单，ControlValueAccessor 与 PropertyBinding

Question

我有一些表单组件，它们实际上只是将大公式的某些部分包装成小块。我可以想象有两种方法可以做到这一点：一个 ControlValueAccessor 或一个简单的 PropertyBinding 将 FormControl 传递给子组件。

超简单示例 https://stackblitz.com/edit/angular-dt6pva

核心理念：

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

对比

...
  @Input()
  control = new FormControl();
...

ControlValueAccessor 方式感觉更“正确”，但也更“有效”。

问题： 使用更简单的 FormControl-Input-Binding 有哪些方面/优点/缺点？

编辑

想想这个json结构应该设计成form

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }

我会定义 3 个组件：PersonForm、AdressForm、CompanyForm

我想到的优点/缺点，有人可能会添加一些我没有看到的点：

FormControl-输入

• ++更简单的子组件
• --使用的不同属性（我不能重复使用formControl /formControlName）

控制值访问器

• ++与所有其他输入组件 (formControlName) 的用法相同
• --“更多工作”要实施
• ??拆分了一个大的表单定义。一方面，构建小型组件通常是一个好点，我可以重用表单组件。另一方面，我“松散”了可以直接发送到休息后端的数据结构的整体视图：

   peronForm = new FormGroup({
    id: new FormControl(),
    name: new FormControl(),
    username: new FormControl(),
    email: new FormControl(),
    address: new FormControl(), //>> handled by AdressComponent
    company: new FormControl() //>> handled by CompanyComponent
  });

直到现在：不确定这是好是坏:)

感谢您的帮助

Answer 1

场景是 Angular Reactive Forms，具有相当复杂的表单，按子部分组织。

这两种做法不一样，有很多不同。

但是，基本问题是：每个子表单是否代表一个不可分割的值，还是一个适当的子表单？ 或者：您认为您可以对每个子表单的不同部分进行多次验证吗？

ControlValueAccessor 内部发生的事情与 FormControl/FormGroup 无关：这是抽象的全部意义所在。 因此，验证和值更改事件仅在 ControlValueAccessor 级别处理。

换句话说，当您必须管理一个单个值时，应该使用ControlValueAccessor，无论它具有何种结构（例如，代码/值对、以记录为选定对象的选择）值）。

如果您有一组字段（例如，像用户的数据：姓名、姓氏、ecc），您正在查看一个子表单。然后你应该更喜欢嵌套的FormGroup。

希望对你有帮助。