Angular 5：如何在patchValue之后选择RadioButtons？

Question

我有一个带有几个单选按钮的FormGroup，它是动态构建的，如下所示：

toFormGroup(questions: Question[]) {
    const group: any = {};

    questions.forEach((question) => {
        group[question.id] = new FormControl('', Validators.required);
    });
    return new FormGroup(group);
}

这里输入无线电的相应html

<div class="radio" *ngFor="let answer of answers">
<label class="radio">
    <input type="radio"
           [formControlName]="question.id"
           [value]="answer"/>&nbsp;{{answer.name}}
</label>
</div>

当用户手动选择表单时，表单工作正常，但现在我尝试添加恢复半完成表单的可能性，因此需要使用存储的值重新填充它。

我（尝试）重新填充它的最小例子：

patchValues() {
    console.log('Form value before: ' + JSON.stringify(this.form.value));

    const value = {};
    value[1] = new Answer(99, 'YES');
    value[2] = new Answer(100, 'NO');

    console.log('Patching values: ' + JSON.stringify(value));

    this.form.patchValue(value);

    console.log('Form value after: ' + JSON.stringify(this.form.value));
}

工作原理：

• 使用修补后的值按预期记录form.value的值。
• 补丁后字段变为有效（绿色左边框）。

什么不起作用：

• 单选按钮保持空白（未选中）

所以现在我想知道缺少的部分是什么，以便恢复单选按钮的检查状态以及它们的值？

Answer 1

您必须将当前选中的值（answer.name）存储为字符串。无论是在单个变量中还是在对象中。

让我们将它存储在一个对象中，这样就可以控制许多选项组的状态。

States{question1: string, question2: string}

将一个组的单选按钮绑定到同一个字段，并将[checked]设置为当前状态。

<input type="radio"
       [formControlName]="question.id"
       [(ngModel)]="states.question1"
       [checked]="states.question1"
       [value]="answer.name"/>&nbsp;{{answer.name}}

你必须找到一些方法来持久化状态对象。然后，您可以恢复每个选项组的状态。

Answer 2

问题是我正在修补不同的答案对象作为值，从创建表单时分配给输入的相应[value]的值。

新值是根据以前存储的ID字段从DB中提取的，因此它与之前分配给输入[value]的对象引用不同。

要获得此结果，我必须在Question对象中存储一组答案，而不是循环遍历question.answers以构建输入，并将每个答案分配为[value]。 然后，在补丁中，循环存储的问题==＆gt;回答并根据答案的ID，从Question对象的答案中获取确切的对象引用。

它可能看起来很奇怪，但效果很好，不需要[检查]表达。