Question

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

<div formControlName="controlName">

在上面的div元素中？如果没有那么我们如何使用表单控件与div？

此外，当w单击一个地址块时，它应该更改背景颜色以将显示更改为选中，并且应在块的右上角显示刻度线。我可以在不使用循环时显示此样式更改但我无法在地址循环中使用样式更改

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

这适用于单选按钮，但我不确定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>

Answer 2

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

div元素可以使用formControlName吗？

2 个答案: