Angular 5: как выбрать RadioButtons после patchValue?

У меня есть 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 регистрируются, как и ожидалось, с исправленными значениями.
  • поля стали действительными (зеленая левая граница) после патча.

введите здесь описание изображения

Что не работает:

  • радиокнопки остаются пустыми (не отмечены)

Итак, теперь мне интересно, что отсутствует, чтобы восстановить проверенный статус переключателей в дополнение к их значениям?


angular forms radio-button reactive-forms
person 1Z10    schedule 18.05.2018    source источник
comment
Где вы храните отмеченное состояние переключателя?   -  person Lynx 242    schedule 18.05.2018
comment
Я просто храню что-то вроде fieldName - ›dirtyValue в БД. Нужно ли мне хранить что-то лишнее?   -  person 1Z10    schedule 18.05.2018

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны сохранить текущее проверяемое значение (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}}

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

person Lynx 242    schedule 18.05.2018
comment
Что ж, после вашего ответа что-то сдвинулось ... Проблема в том, что теперь они оба проверены :( - person 1Z10; 18.05.2018
comment
Извините, допустил ошибку, разместив решение для флажков вместо переключателей. Исправил. - person Lynx 242; 19.05.2018

arrow_upward
0
arrow_downward

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

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

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

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

person 1Z10    schedule 20.05.2018