[英]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.