问题描述
我正在使用 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>
解决方法
您的模态似乎缺少开始:
<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}"
部分。在打字稿中,我将其与以下内容匹配:
onSubmit() {
this.display='none'
更改样式会关闭模型。根据您的环境,这可能/可能不适合您。