Question

关于使用单选按钮和动态生成的反应式表单，我看到了很多不同的文章，但是到目前为止，我所做的任何更改都没有起作用。我遇到的问题是单选按钮一起切换一次，然后无法再次切换。它们都是真实的，这是不可能的，因为它们是单选按钮。我的表单有复选框，它们可以正常工作。我已经添加，删除和更改了名称和值属性，但它仍然响应相同。如果我删除了绑定，表单将无法正确呈现。

我在做什么错？以下是相关代码。

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

//初始化表格

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

//用来自数据库的已保存响应填充表单 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);

                }
            }
        }

Answer 1

您的单选按钮缺少name属性，该属性将单选按钮组合在一起。 name属性必须具有相同的值，并且必须与该组的所有单选按钮共享。

添加了name属性后，当您在同一组中按下另一个按钮时，单选按钮应“取消锁定”。

查看此答案，其中包含一些实施细节：https://stackoverflow.com/a/49078441/1433107

为什么我的单选按钮不能在动态生成的反应式表单中切换？

1 个答案: