Why don't my radio buttons toggle in dynamically generated Reactive Form?

Question

I've seen a bunch of different posts on using radio buttons with dynamically generated Reactive Forms, but so far nothing I've changed has worked. The problem I'm having is that my radio buttons toggle once together and then I can't toggle them again. They both are true, which is suppose to be impossible because they're radio buttons. My form has checkboxes and they work fine. I've added, removed, and changed the name and value attributes and it still responds the same. if I remove the binding the form doesn't render properly.

What am I doing wrong? Below is the relevant code.

                    <section
                        class="table__row"
                        [formGroup]="contactPreferencesForm"
                        *ngFor="let preference of communicationPref.preferences">
                        <div class="table__row__question">
                            <p class="t-data t-bold">{{preference.display_text}}</p>
                            <p class="t-caption">{{preference.description}}</p>
                        </div>
                        <ng-container
                            *ngFor="let option of preference.options; let i = index">
                            <div
                                *ngIf="!preference.select_many; else oneOption"
                                class="table__cell">
                                <div class="u-maxXY u-flex u-justifyCenter">
                                    <input
                                        type="checkbox"
                                        class="input input--checkbox"
                                        ngDefaultControl
                                        [formControl]="contactPreferencesForm.get(['communication', 'preferences']).controls[i]">
                                </div>
                            </div>

                           // radio buttons that aren't working
                            <ng-template #oneOption>
                                <div class="table__cell">
                                    <div class="u-maxXY u-flex u-justifyCenter">
                                        <input
                                            type="radio"
                                            class="input input--radio"
                                            value="contactPreferencesForm.get(['communication', 'preferences']).controls[i]"
                                            [formControl]="contactPreferencesForm.get(['communication', 'preferences']).controls[i]">

                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                    </section>

// initialize form

this.contactPreferencesForm = new FormGroup({});
    this.memberService.initPreferences();
    this.memberService.communicationPreferences.subscribe((val) => {
        this.communicationPref = val[0];

        this.contactPreferencesForm.addControl('communication', new FormGroup({}));
        this.communicationPref['preferences'].forEach((preference) => {

            const communication_preferences = this.contactPreferencesForm.get('communication') as FormGroup;
            communication_preferences.addControl('preferences', new FormArray([]));
            this.formControlArray = this.contactPreferencesForm.get(['communication', 'preferences']) as FormArray;

            preference.options.forEach((option, i) => {
                this.formControlArray.push(new FormControl(null));

                if (!!option.name) {
                    this.allPreferences.push(option.name);
                }
            });
        });

// populate form with saved responds from database this.userPreferences = val[1];

        // creating an arr of userPreferences to filter so I can match against the item's index in allPreferences
        const userPreferencesArr = [];
        this.userPreferences['data'].forEach((preference, i) => {
            if (!!preference.name) {
                userPreferencesArr.push(preference.name);
            } else {
                console.error('Your preferences must include a name key');
            }
        });

        for (const i in this.allPreferences) {
            if (this.allPreferences.hasOwnProperty(i)) {
                const formValue = this.contactPreferencesForm.get(['communication', 'preferences']).value;

                // returning the index of the userPreferences relative to all preferences
                if (userPreferencesArr.indexOf(this.allPreferences[i]) > -1) {

                    // setting the index of the userPreference in the form
                    formValue[i] = true;
                    this.contactPreferencesForm.get(['communication', 'preferences'])
                        .patchValue(formValue);

                }
            }
        }

score 0 · Answer 1 · answered Oct 23 '19 at 05:18

Your radio buttons are missing the name attribute, which groups the radio buttons together. The name attribute has to be of the same value / shared across all radio buttons with the group.

Once you add the name attribute, the radio-buttons should "untoggle" when you press another one in the same group.

Check out this answer that has some implementation details: https://stackoverflow.com/a/49078441/1433107

Why don't my radio buttons toggle in dynamically generated Reactive Form?

1 Answers1