Angular 5：select RadioButtons 之后如何设置patchValue？

Question

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

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

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

这里对应html的input radio

<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

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

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

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

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

Angular 5：select RadioButtons 之后如何设置patchValue？

Angular 5: how to select RadioButtons after patchValue?

forms

radio-button

angular

angular-reactive-forms