div元素可以使用formControlName吗？答案

【问题标题】：Can div element use formControlName?div元素可以使用formControlName吗？
【发布时间】：2018-09-19 07:31:09
【问题描述】：

我正在使用 angular 2。我正在处理一个需要显示地址列表并选择其中一个的表单。我最初使用的是单选按钮，但要求已更改，我们将其显示为 div 块。我想知道我们是否可以使用

<div formControlName="controlName">

在像上面这样的 div 元素中？如果不是那么我们如何使用表单控件和 div？

另外，当点击一个地址块时，它应该改变背景颜色以改变显示为选定的并且一个勾号应该出现在块的右上角。我可以在不使用循环时显示此样式更改，但我无法在地址循环中使用样式更改

此表格有多个这样的块，在每个块中，地址选择是强制性的，在每个块中我们将有多个地址。所以有一个主循环，其中我有地址循环。

这适用于单选按钮，但我不确定 div 是否也是如此。请指导我。

【问题讨论】：

你的意思是把一些input包装到div中？
没有输入元素只有div
那么你应该实现自定义ControlValueAccessor，比如RadioControlValueAccessor和SelectControlValueAccessor
我可以这样做吗显示要在 div 中选择的选项并具有隐藏的单选按钮，然后单击 div 单选按钮被选中并且 div 背景颜色发生变化？

标签： html angular angular2-forms forms

【解决方案1】：

您可以使用ControlValueAccessor，并创建一个组件/指令作为新的自定义表单控件。

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

@Component({
  selector: 'div-select-buttons',
  providers: [
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DivSelectButtonsComponent),
        multi: true
    }
  ],
  template: `<div>your inputs</div>`,
})
class DivSelectButtonsComponent implements ControlValueAccessor {
    // implementation ControlValueAccessor interface
}

然后将其用作表单控件，如下所示：

<form [formGroup]="form">
    <div-select-buttons formControlName="controlName"></div-select-buttons>
</form>

【讨论】：

【解决方案2】：

根据我们需要更改项目显示的要求。因此，与其创建一个新组件来将表单控件添加到 div，不如添加一个隐藏的单选按钮并使用抽象控件推送值....谢谢大家的输入....

【讨论】：