angular - 将 FormControl 传递给子组件 - 未指定名称的表单控件没有值访问器

Question

我有一个输入组件 customInput它创建了一个经典的输入字段并为其添加了一些布局香料，没有额外的逻辑。

我想将 formControl 传递给它，以将其绑定(bind)到它包含的输入。

应该这样使用:

<form [formGroup]="form">
  <custom-input [formControl]="form.controls['control']"></custom-input>
</form>

内部自定义输入:

export class HidInputFieldComponent  {
   @Input() formControl: AbstractControl

   ...
}

<div class="container">
  <input [formControl]="formControl"/>
    <label>label</label>
</div>

现在当我初始化组件时，我得到

No value accessor for form control with unspecified name

在我的组件构造函数中记录控件，它是未定义的。

我做错了还是没有办法解决 ControlValueAccessor ?由于我实际上并没有构建自定义控件(我仍然使用经典输入)，因此看起来很极端

Answer 1

您不需要导入 ControlValueAccessor 或任何类似的东西来完成它。
您需要做的就是将 FormControl 对象传递给您的子组件，如下所示:

<form [formGroup]="form">
  <custom-input [control]="form.controls['theControlName']">
  </custom-input>
</form>

这意味着您的自定义输入组件应如下所示:

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

@Component({
  selector: 'custom-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent {
  @Input() control: FormControl;
}

和模板:

<input [formControl]="control">

就是这样。
如果您像这样实现自定义输入，则不必将父 formGroup 带入子组件逻辑，那是完全没有必要的(除非您需要对其或其余一些表单控件进行一些操作)。
此外，将 FormControl 对象传递给自定义输入将使您能够访问它的属性，而无需引用 FormGroup 然后获取特定控件，因为这是在父组件上完成的工作。
我希望这个解决方案有助于简化许多人的工作，因为制作这种自定义控件很常见。