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);
}

这里输入radio对应的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

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

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

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

它可能看起来很奇怪，但它工作得很好，不需要有 [checked] 表达式。

Answer 2

您必须将当前检查的值 (answer.name) 存储为字符串。在单个变量中或在对象中。

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

States{question1: string, question2: string}

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

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

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