Я написал Реактивную форму. Предполагается, что кнопка отправки находится за пределами реактивной формы, у нее также есть два раскрывающихся списка. В этой форме я динамически читаю данные из 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>