Angular 11提交表单时关闭引导模式
Angular 11提交表单时关闭引导模式
提问于 2021-03-10 16:21:00
我正在使用angular 11。在我的应用程序中，我需要在点击提交按钮后关闭模式。我尝试在提交按钮上使用data-dismiss="modal“，但是忽略了我的onSubmit方法的逻辑。
这是我的模式
<div class="container">
<div>
<form [formGroup]="FormData" (ngSubmit)="onSubmit(FormData.value)">
<div class="form-group">
<input class="form-control" name="userName" placeholder="User name" formControlName="userName" required>
</div>
<div *ngIf="FormData.controls.userName.invalid && (FormData.controls.userName.dirty || FormData.controls.userName.touched)"
class="alert alert-danger">
<div *ngIf="FormData.controls.userName.errors.maxlength">
Maximum length should be 256 characters
</div>
<div *ngIf="FormData.controls.userName.errors.required">
Name is required.
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter email"
formControlName="email" required>
<div *ngIf="FormData.controls.email.invalid && (FormData.controls.email.dirty || FormData.controls.email.touched)"
class="alert alert-danger">
<div *ngIf="FormData.controls.email.errors.required">
E-mail is required.
</div>
<div *ngIf="FormData.controls.email.errors.email">
Email should be correct
</div>
</div>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<textarea class="form-control" formControlName="message" name="message"></textarea>
<div *ngIf="FormData.controls.message.invalid && (FormData.controls.message.dirty || FormData.controls.message.touched)"
class="alert alert-danger">Maximum length should be 1000 characters
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2021-03-10 16:41:28
你的模式似乎缺少一个开头：
<div class="modal" tabindex="-1" role="dialog" [style]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form [formGroup]="form" (ngSubmit)="onSubmit()">我使用bootstrap风格，但没有bootstrap js。因此出现了额外的[style]="{'display':display}"片段。在Typescript中，我将其与以下内容匹配：
onSubmit() {
this.display='none'更改样式将关闭模型。根据您的环境，这可能适用于您也可能不适用于您。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66560848
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号