Angular 2 - 带有Radio Inputs的Dynamic Reactive表单，使用FormBuilder，FormGroup，FormArray构建

Question

案例： 我有一系列答案，我希望在视图中显示为无线电输入。当其中一个答案已经回答时，必须[检查]如果[检查]一个textarea显示，到目前为止一直很好。

接下来我想检查另一个无线电输入，并且我希望取消选择当前选择的并且隐藏其textarea，然后应该[检查]新选择的无线电输入并且它应该显示textarea。

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

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

- 我无权访问已检查的事件，我可以在{{tempVar.checked}}的视图中显示它，如上所示，如果我使用模板变量#tempVar，但我不知道可以在*ngIf="tempVar.checked"下方的textarea中访问它。如果我在ngIf中使用它，我会收到以下错误

检查后表情发生了变化。上一个值：'false'。当前价值：'true'。

问题：

• 这是正确的方法吗？
• 带有FormBuilder和带有无线电输入的FormArray的反应动态表单的示例

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

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