反应式表单，唯一触发三个点击事件.1.提交表单 2.从下拉中发送数据 3.相同的两个，在同一个反应式表单中。

Question

我已经写了一个Reactive表单，提交按钮应该在Reactive表单外面。提交按钮应该在Reactive表单之外，它也有两个下拉菜单。在这个表单中，我从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>

Answer 1

我可以通过在保存按钮中使用form="myForm "属性和在表单标签中使用id="myForm "属性来解决上述问题......只要使用这些属性......我就可以为所有三个事件提供唯一的触发器......Im stilll keep posted so that someone need not to waste almost 4hours or more in finding it out......。