html - Reactive Forms，唯一触发三个点击事件。1.提交表单 2.从下拉列表发送数据 3.同两个，在同一个 Reactive Form

问题描述

我写了一个响应式表单。提交按钮应该在反应式表单之外。它也有两个下拉菜单。在这种形式下，我从 api 动态读取数据。我也在下拉列表中编写了点击事件（目的是在我提交表单时绑定该特定值）。这里的问题是，每当我点击下拉菜单时......提交按钮点击事件被触发......我一直试图让它们（三个点击事件）是唯一的......但我无法...... ..请帮助我。下面我提供我的代码。

    <div class="container content-box-shadow tiles-top-spacing tiles-page">
    <div class="row assessment-m-b">
        <div class="col-lg-12 col-md-12 pt-3 pb-5">
            <div class="d-flex align-items-center justify-content-between">
                <span class="common-headding">{{pageText?.accountSettingPageTextData?.editHeader}}</span>
                <div>
                    <button type="submit" class="common-button green"
                        (click)="onSubmit()">{{pageText?.accountSettingPageTextData?.save}}</button>
                    <button type="button"
                        class="common-button orange" (click)="previousModule()">{{pageText?.accountSettingPageTextData?.cancel}}</button>
                </div>
            </div>

            <div class="account-settings-block">
                <form *ngIf="personalData" [formGroup]="accountSettingsForm" >..................................................

                    <!-- Account-Settings Security Questions -->
                    <div *ngIf=" personalData?.dashBoardPersonalInfoData?.securityQuestionsAnswers.isVisible"
                        class="account-form-inner-block">
                        <legend>{{pageText?.accountSettingPageTextData?.questions?.header}}<span class="required">**</span></legend>
                        <div class="row">

                            <div class="col-md-6">
                                <div>
                                    <label for="question1">
                                        {{pageText?.accountSettingPageTextData?.questions?.question1}}
                                    </label>
                                    <div class="btn-group w-100 pt-1" ngbDropdown>

                                        <button class="btn btn-secondary dropdown-toggle w-100 text-left"
                                            aria-haspopup="true" aria-expanded="false" id="dropdownMenu1"
                                            ngbDropdownToggle>
                                            <span *ngIf="!SecurityQuestion1.question">
                                                Select a Question
                                            </span>
                                            <span *ngIf="SecurityQuestion1.question">
                                                {{SecurityQuestion1.question}}
                                            </span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
                                            <button (click)="selectQuestion1(questions)"
                                                *ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
                                                class="dropdown-item">{{questions?.question}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div>

                                    </div>


                                </div>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <label for="question2">
                                        {{pageText?.accountSettingPageTextData?.questions?.question2}}
                                    </label>
                                    <div class="btn-group w-100 pt-1" ngbDropdown>
                                        <button class="btn btn-secondary dropdown-toggle w-100 text-left"
                                            aria-haspopup="true" aria-expanded="false" id="dropdownMenu2"
                                            ngbDropdownToggle>
                                            <span *ngIf="!SecurityQuestion2.question">
                                                Select a Question
                                            </span>
                                            <span *ngIf="SecurityQuestion2.question">
                                                {{SecurityQuestion2.question}}
                                            </span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
                                            <button (click)="selectQuestion2(questions)"
                                                *ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
                                                class="dropdown-item">{{questions?.question}}
                                            </button>
                                        </div>
                                    </div>
                                </div>


                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

标签： htmlangularangular-reactive-forms

html - Reactive Forms，唯一触发三个点击事件。1.提交表单 2.从下拉列表发送数据 3.同两个，在同一个 Reactive Form

问题描述

解决方案

推荐阅读