Angular 2 - 使用 FormBuilder、FormGroup、FormArray 构建的具有无线电输入的动态反应式表单答案

【问题标题】：Angular 2 - Dynamic Reactive form with Radio Inputs build with FormBuilder, FormGroup, FormArrayAngular 2 - 使用 FormBuilder、FormGroup、FormArray 构建的具有无线电输入的动态反应式表单
【发布时间】：2017-01-05 13:04:48
【问题描述】：

案例：我有一系列答案，我想在视图中显示为无线电输入。当其中一个答案已经被回答时，它必须被[选中]，如果它被 [选中] 一个 textarea 显示，到目前为止一切都很好。

接下来我想检查另一个单选输入，我希望取消选择当前选择并隐藏它的文本区域，然后应该[选中]新选择的单选输入并且它的文本区域应该显示。

我使用 FormBuilder 和 FormArray 并遇到以下问题。

我不能在没有内插的情况下使用index，我看到很多没有使用索引的例子。
如果我选择另一个无线电输入，首先我的数据会消失并且未选中，第二次单击时会选中，但现在两者都选中了。

- 我无权访问已检查的事件，如果我使用模板变量 #tempVar，我可以使用 {{tempVar.checked}} 在视图中显示它，但我无权访问在*ngIf="tempVar.checked" 下方的文本区域中添加它。如果我确实在 ngIf 中使用它，我会收到以下错误

表达式在检查后发生了变化。以前的值：“假”。当前值：'true'。

问题：

这是正确的方法吗？
带有 FormBuilder 和带有 Radio 输入的 FormArray 的响应式动态表单示例

这是我的代码 https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf

【问题讨论】：

标签： forms angular radio-button angular2-formbuilder

【解决方案1】：

我认为应该为唯一标识符保留使用标签？如果 dom 渲染器会更新所有具有相同 id 的元素，我不会感到惊讶。

不确定这是否有帮助，但您可以改用答案视图模型（包含相同的数据），但它也具有“已检查”属性

通过这种方式，您可以确定它会按照您的预期运行。

例如：（在您的 component.ts 中）

let answers =  this.question.Question.PossibleAnswers
.map(a => 
 { return Object.assign({}, a, { checked: false });
 }
);

然后在 html 中你使用：'answer.checked' 而不是 'radio.checked'

ps：您也可以使用 ng-container 代替 span，因此您的 html 中没有额外的 DOM 印记

【讨论】：