html - div元素可以使用formControlName吗？

Question

我正在使用 Angular 2。我正在开发一个表单，需要显示地址列表并选择其中一个。我最初使用单选按钮进行相同的操作，但要求已更改，我们将其显示为 div block 。我想知道我们是否可以使用

<div formControlName="controlName">

在像上面这样的 div 元素中？如果不是，那么我们如何将 form Control 与 div 一起使用？

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

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

这对于单选按钮效果很好，但我不确定 div 是否也是如此。请指导我。

Answer 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>