How to set the selected radio button initially in *ngFor on radiobutton group

Question

Before I used forms validation everything worked and my radio button group html looked like this:

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

After implementing reactive forms it looked like this:

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

I added the formControlName attribute and removed the ngModel directive...

Then I changed the code: GradingKeyComponent.ts:

ngOnInit()
{
 this.gradingKeyForm = this.fb.group({
      bestGradeScores: bestGradeScoresFormControl,
      worstGradeScores: worstGradeScoresFormControl,
      scoreAtBend: [this.gradingKey.scoreAtBend],
      gradeAtBend: [this.gradingKey.gradeAtBend],
      halfScoresCount: [this.gradingKey.currentAnswer]
    });
}

I did NOT change my Model object: GradingKey.ts

constructor(obj: any)
{
    this.halfScoresCountAnswers = [new KeyValue(true, 'Yes'), new KeyValue(false, 'No')];
    this.currentAnswer = obj.halfScoresCount == true ? this.halfScoresCountAnswers[0] : this.halfScoresCountAnswers[1];
}

I would prefer not to change my html just because I need validation now... 2 concerns!

At the moment no radio buttons value is set as true/selected.

Some might say this is due to having 2 equal formControlName`s in the *ngFor...

How should I solve that correctly if possible without changing my html?

score 1 · Accepted Answer · answered Mar 05 '17 at 22:16

1

Once your relevant FormControl's (in this case, halfScoresCount) [value] is set, the relevant radio option whose answer matches should be automatically selected.

I suspect this is due to initializing

halfScoresCount: [this.graFodingKey.currentAnswer]

as an array. It should probably be

halfScoresCount: this.graFodingKey.currentAnswer

where this.graFodingKey.currentAnswer matches a possible value in gradingKey.halfScoresCountAnswers[] (more explicitly, matches a possible value for the iterated answers) exactly as you did before reactive forms (i.e., [(ngModel)]="gradingKey.currentAnswer" [value]="answer")

answered Mar 05 '17 at 22:16

msanford

11,803
11
66
93

1

That worked thanks! I wondered because that array notation I have always used but mostly with additional validators. Never had a problem there. hm... – Pascal Mar 05 '17 at 22:29
@Pascal Yes, the array and parameter notation are confusingly similar. Glad it worked! – msanford Mar 05 '17 at 22:30
As I wrote above it worked so it must have worked! Now I tested it again and it does not work :/ Lately I updated Angular from I guess 4.1.0 to 4.2.6. now the current answer is never set. Any idea? – Pascal Jul 17 '17 at 19:43
Other guy same problem it seems: https://stackoverflow.com/questions/43796055/angular4-radio-button-binding-not-working-with-reactive-forms – Pascal Jul 17 '17 at 21:14

How to set the selected radio button initially in *ngFor on radiobutton group

1 Answers1

Linked