[英]Bootstrap 4 modal does not close after calling angular5 .reset()
I have been stuck on this for two hours and I can't find anything helpful online as many of the examples are outdated. 我已经坚持了两个小时,但由于许多示例已过时,因此我在网上找不到任何有用的信息。 I'm trying to reset / clear my form after the submit() button is pressed.
我试图在按下Submit()按钮后重置/清除表单。 Here are some of the things that I have tried:
这是我尝试过的一些方法:
this.memoForm.reset() this.memoForm.reset()
reassigning the form group variable: 重新分配表单组变量:
this.memoForm = this.formBuilder.group({ title: ["", Validators.required], description: ["", Validators.required], tags: [""] }); this.memoForm = this.formBuilder.group({title:[“”,Validators.required],描述:[“”,Validators.required],标签:[“”]}));
setPristine() setPristine()
submit function: 提交功能:
submit() {
if (this.memoForm.valid) {
let data = {
title: this.memoForm.value.title,
description: this.memoForm.value.description
};
// send form
this.memoForm.reset();
}
}
html: 的HTML:
<form [formGroup]="memoForm" (ngSubmit)="submit(); memoForm.reset()" (keydown.enter)="submit()">
<div class="form-group buffer-top">
<label for="memoTitleInput">Title</label>
<input type="text" formControlName="title" class="form-control" placeholder="Enter a title for your new item">
</div>
<div class="form-group">
<label for="memoDescriptionInput">Description</label>
<input type="text" formControlName="description" class="form-control" placeholder="Your memo">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" (click)="submit()" data-dismiss="modal" class="btn btn-primary" [disabled]="!memoForm.valid">Save</button>
</div>
</form>
I think that you have some problem with your component scope (view-encapsulation). 我认为您的组件范围(视图封装)存在一些问题。
Bootstrap use jquery to add this type of functionalities, but angular add their VE and the css selector sometime can not reach deeply in your component, try to make one plain example, without any logic, only the simple bootstrap example, if nothing happen try to change your https://angular.io/guide/component-styles#view-encapsulation to None and maybe this will work. Bootstrap使用jquery添加了这种类型的功能,但是在某些时候无法有角度地添加其VE和CSS选择器,请尝试编写一个简单的示例,没有任何逻辑,只有简单的bootstrap示例,如果什么都没有发生,请尝试将您的https://angular.io/guide/component-styles#view-encapsulation更改为None,也许这会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.