Angular 5: как выбрать 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 радио входа

<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

Проблема в том, что я исправлял другой объект ответа в качестве значения от объекта, назначенного соответствующему [значению] ввода при создании формы.

Новыйзначение было выбрано из БД на основе ранее сохраненного поля идентификатора, поэтому это не было то же самое, что ссылка на объект, ранее назначенная для [значения] ввода.

Чтобы получить этот результат, мне пришлось сохранитьмассив ответов в объекте Question, затем перебирайте вопрос.ответы для построения входных данных и присваивайте каждому ответу значение [значение].Затем в патче зациклите сохраненный ответ на вопрос ==> и, основываясь на идентификаторе ответа, получите точную ссылку на объект из ответов на вопрос объекта.

Может показаться странным, но это сработалоотлично, без необходимости иметь [проверенное] выражение.

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

Вы должны найти способ сохранить объект состояний.Затем вы можете восстановить состояние каждой группы параметров.