Angular 4 reactive forms with radio button binding on complex object does not work

Question

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

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. — AVJT82
– AVJT82, Commented Jul 21, 2017 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
– Pascal, Commented Jul 21, 2017 at 17:52

chairmanmow · Accepted Answer · 2017-07-20 20:21:32Z

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

answered Jul 20, 2017 at 20:21

chairmanmow

6507 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pascal Over a year ago

Should the checked attribute really be used with reactive forms?

chairmanmow Over a year ago

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.

Collectives™ on Stack Overflow

Angular 4 reactive forms with radio button binding on complex object does not work

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related