将 FormControl 传递给子组件 - 没有未指定名称的表单控件的值访问器 [英] Passing a FormControl to a child component - No value accessor for form control with unspecified name

问题描述

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

我想将一个 formControl 传递给它，将它绑定到它包含的输入.

应该这样使用:

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

内部自定义输入:

导出类 HidInputFieldComponent {@Input() 表单控件:抽象控件...}<div class="容器"><input [formControl]="formControl"/><label>label</label>

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

<块引用>

未指定名称的表单控件没有值访问器

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

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

解决方案

您不需要导入 ControlValueAccessor 或任何类似的东西来实现这一点.

您需要做的就是像这样将 FormControl 对象传递给您的子组件:

<custom-input [control]="form.get('theControlName')"></自定义输入></表单>

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

import {Component, Input} from '@angular/core';从@angular/forms"导入{FormControl}；@成分({选择器:'自定义输入'，templateUrl: './input.component.html',styleUrls: ['./input.component.scss']})导出类 InputComponent {@Input() 控件:FormControl；}

和模板:

就是这样.

如果你实现这样的自定义输入，你就不必将父 formGroup 带入子组件逻辑中，在那里完全没有必要(除非你需要对它或表单的其余部分进行一些操作控制).

此外，将 FormControl 对象传递给自定义输入可以让您访问它的属性，而无需引用 FormGroup 然后获取特定控件，因为这是在父组件上完成的工作.

我希望此解决方案有助于简化许多人的工作，因为制作此类自定义控件非常普遍.

I have an input component customInput that creates a classic input field and adds some layouting-spice to it, no additional logic.

I want to pass a formControl to it, to bind it to the input it contains.

Should be used like this:

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

Inside Custom Input:

export class HidInputFieldComponent  {
   @Input() formControl: AbstractControl

   ...
}

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

Now when i initialize the component, i get

No value accessor for form control with unspecified name

Logging the control in my components constructor, it is undefined.

Am I doing it wrong or isn't there a way around ControlValueAccessor? Since I am not actually building a custom control (I still use classic input) it seems extreme

解决方案

You don't need to import ControlValueAccessor or anything similar to accomplish that.

All you need to do is to pass the FormControl object to your child component like this:

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

That means you custom-input component should look like this:

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;
}

And the template:

<input [formControl]="control">

And that's it.

If you implement the custom input like that you won't have to bring the parent formGroup into the child component logic, it is completely unnecessary there (Unless you need to make some operations on it or on some of the rest of form controls).

Besides, passing the FormControl object to the custom input would give you access to the properties of it without referencing the FormGroup and then getting the specific control, because that's a work done on the parent component.

I hope this solution helps to simplify the work of many people as it's pretty common to make this kind of custom controls.

这篇关于将 FormControl 传递给子组件 - 没有未指定名称的表单控件的值访问器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！