angular - 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结构

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[e-mail]",
    "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
  });

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

感谢您的帮助

标签： angularangular-reactive-formsproperty-bindingcontrolvalueaccessor

Answer 1

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

这两种方法并不相同，而且有很多不同之处。

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

a 内部发生的事情ControlValueAccessor与FormControl/无关FormGroup：它是抽象的重点。因此，验证和值更改事件仅在ControlValueAccessor级别处理。

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

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

希望能帮助到你。