0

The gradingKey.currentAnswer is not bound to the radio button when the value is initially added to the form.

why does it not work?

This worked once before angular 4 see: How to set the selected radio button initially in *ngFor on radiobutton group

HTML

<form [formGroup]="gradingKeyForm">

<div class="form-group row">
<label class="col-6 col-form-label">{{getHalfScoresErrorsCount()}}</label>
<div class="col-6">
<span *ngFor="let answer of gradingKey.halfScoresCountAnswers">
    <label class="radio-inline">
        <input type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
        formControlName="halfScoresCount" [value]="answer">
        {{answer.value}}
     </label>
</span>
</div>
</div>
</form>

Component

 ngOnInit() {

    this.gradingKeyForm = this.fb.group({       
      halfScoresCount:   this.gradingKey.currentAnswer,
     });
}

Model

import KeyValue from '../keyvalue';
import { IGradingKey } from './shared/grading-key-interface';

export default class GradingKey implements IGradingKey {

  halfScoresCountAnswers: KeyValue<boolean, string>[];
  currentAnswer: KeyValue<boolean, string>;

  constructor(obj: any) {
    this.halfScoresCountAnswers = [new KeyValue(true, 'Ja'), new KeyValue(false, 'Nein')];
    this.currentAnswer = obj.halfScoresCount == true ? this.halfScoresCountAnswers[0] : this.halfScoresCountAnswers[1];
   }
}
Pascal
  • 12,265
  • 25
  • 103
  • 195
  • Could you create a plunker, because I wouldn't use the `checked` here, and having a plunker to tinker with would help. Currently there isn't enough code to reproduce the issue. – AT82 Jul 21 '17 at 12:22
  • So... have you already tried to repro the "bug" with the above code? Actually everything is there whats needed. I can create a plunkr later... – Pascal Jul 21 '17 at 17:52

1 Answers1

1

You can added a [checked] property to the radio group which can be a statement to evaluate whether the radio should be checked or not. As long as clicking is setting the values, and the issue is the radio group not reflecting the data that was changed, it'll probably work for you.

Relevant answer: https://stackoverflow.com/a/39407224/3934988

So assuming your code works as it should everywhere else, something like this should work :

  <input type="radio"      (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
    formControlName="halfScoresCount" [value]="answer" [checked]="answer === currentAnswer">
chairmanmow
  • 649
  • 7
  • 20
  • 1
    Should the checked attribute really be used with reactive forms? – Pascal Jul 20 '17 at 20:35
  • Cool, you might want to accept the answer if it works for you, since it's gotten a little flak in the comment section, but you seem to know how to use stack overflow, so I'll leave it up to you. – chairmanmow Jul 20 '17 at 21:06