当我在ng-select下拉列表中选择特定的“其他”值时,我希望停止事件并冻结下拉列表。当用户选择“其他-请指定原因”时,下拉列表不应关闭。对于所有其他值,下拉列表应关闭
<div class="" *ngFor="let s of selectedSites">
<div class="columnSite siteName">
<span class="" [title]="s.site_nm">{{ s.site_nm }}</span>
</div>
<!-- <div class="col-md-1"></div> -->
<div class="columnSite">
<div class="custom-ng-select add-sites__ng-selectReason">
<ng-select #ngSelectTa placeholder="Select" [items]="reasonForAddingArray" [multiple]="false"
[clearable]="false" [searchable]="false" (opened)="opened()" (click)="reasonForAdding(s,$event)">
<ng-template ng-multi-label-tmp let-item="item">
<div class="ng-placeholder custom-text">
{{ getPlaceholderLabel('ngSelectTa') }}
</div>
</ng-template>
</ng-select>
<input *ngIf='inputOtherReason' [id]="s.site_nm" type="text" class="form-control inputsearch"
#inputSearch placeholder="Enter Reason For Adding" (keyup)="reasonForAddingOther(s,$event)"
[ngClass]="errorCheck(s)" />
</div>
</div>
</div>
.ts
reasonForAdding(site, $e) {
console.log(site);
console.log($e);
let otherReason = $e.target.innerHTML;
console.log(this.inputOtherReason);
console.log(otherReason);
if (Utils.isArrayExists(this.selectedSites)) {
let reasonObj = { label: '', value: '' };
if (otherReason != 'Others - please specify your reason.' && this.reasonForAddingArray?.includes(otherReason)) {
reasonObj['label'] = otherReason;
reasonObj['value'] = otherReason;
this.inputOtherReason = false;
this.openedValue = false;
console.log(this.inputOtherReason);
} else {
this.inputOtherReason = true;
console.log(this.inputOtherReason);
reasonObj['label'] = 'Others';
reasonObj['value'] = otherReason;
this.openedValue = true;
$e.stopImmediatePropagation();
// $e.stopPropagation();
// $e.preventDefault();
}
}
}
1条答案
按热度按时间yizd12fk1#
尝试使用
[closeOnSelect]="false"
禁用autoclose,并将选定的值和模型引用传递给组件on change event,而不是单击,然后手动关闭它。所以,试试这个:
添加change事件,传递selected value和select model,然后执行检查,并在选择其他值时关闭select,否则它将保持打开状态:
模板:
组分: