Edge Browser не может обнаружить пользовательские флажки

Question

Я создал пользовательские переключатели, которые по сути являются флажками с добавленной логикой, чтобы они работали как переключатели. Когда пользователь делает свой выбор, предполагается, что кнопка отправки включена. Работает нормально на всех браузерах, кроме Edge и IE11. Переключатели переключаются, как и следовало ожидать, но Edge и IE не могут их обнаружить, потому что моя кнопка отправки остается отключенной.

Я смотрел учебные пособия , которые должны заставить его работать, но пока не повезло. Я использую Reactive Forms и динамически генерирую свою форму. У меня были проблемы с использованием стандартных переключателей с формой, поэтому я решил использовать флажки, которые работают как переключатели. Я ищу самое простое решение. Либо выяснить, как заставить IE11 и Edge обнаруживать их, чтобы я мог отправить свою форму, либо использовать переключатели, которые работают с моей динамической Реактивной формой.

                   <section
                        class="table__row"
                        *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>

                           // these are the radio buttons
                            <ng-template #oneOption> 
                                <div class="table__cell">
                                    <div class="u-maxXY u-flex u-justifyCenter">
                                        <label>
                                            <input
                                                type="checkbox"
                                                class="input input--radio"
                                                name="checkbox"
                                                ngDefaultControl
                                                [formControl]="contactPreferencesForm.get(['communication', 'preferences']).controls[i]"
                                                (click)="selectUserPreference(i)">
                                            <input
                                                class="input input--radio"
                                                type="hidden"
                                                name="checkbox"
                                                value="">
                                        </label>
                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                    </section>

// инициализировать форму

        this.communicationPref['preferences'].forEach((preference) => {

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

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

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

// сделать так, чтобы флажки работали как переключатели

selectUserPreference(choice) {
    if (!!this.communicationPref) {
        this.communicationPref['preferences'].forEach((preference) => {
            if (!!preference.select_many) {

                this.contactPreferencesForm.reset();

                const formValue = this.contactPreferencesForm.get(['communication', 'preferences']).value;
                formValue[choice] = true;

                this.contactPreferencesForm.get(['communication', 'preferences'])
                    .patchValue(formValue);
            }
        });
    }
}