[英]How to close the popup modal when we click on save or cancel button
我有一個 angular 應用程序,其中我使用 angular 創建了彈出窗口。
.component.html
<div class="col-md-4 ">
<div class="cc button-popover" >
<popover-content #addObjectivePopovers
[animation]="true"
[closeOnClickOutside]="false"
[closeOnMouseOutside]="false" class="vb" *ngIf="!showPopover" >
<form >
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="name" name="name"></textarea>
</div><br>
<div class="form-group popover-form">
<label>Enter Custom Trigger Habit: I will</label>
<textarea class="form-control" #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea>
<p class="textarea-count">({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p>
</div>
<div class="popover-btn">
<button class="btn btn-default " (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()" >SAVE</button>
</div>
</form>
</popover-content>
</div>
<button [popoverOnHover]="false" type="button" popoverPlacement="bottom" [popover]="addObjectivePopovers" >ADD CUSTOM HABIT</button>
</div>
因此,當我在 textarea 中添加一些內容並單擊保存按鈕時,我必須關閉彈出窗口,而且當我們單擊取消時,它也應該關閉彈出窗口。
任何人都可以提供幫助嗎?
假設show
boolean 標志與 popover 的可見 state 分開,然后將新的 boolean 標志添加到您的組件 ts,它將用於管理 popover 的可見 state 並使用您的取消/保存控件切換它:
組件 ts:
showPopover = false
save() {
this.show = true;
this.showPopover = false;
}
組件 html:
<div class="form-group popover-form" *ngIf="showPopover">
<textarea class="form-control" id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea>
</div>
<div>
<button class="btn btn-default cancel-btn" (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()">SAVE</button>
</div>
<p *ngIf="show">{{name}}</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.