angular - 提交时关闭模式
问题描述
我正在实施一个 crud 操作,我想在 submit 上关闭模式。如果我在提交按钮上使用数据关闭,它只会关闭按钮按钮,该功能不会发生。我希望功能也可以关闭模式。
这是我的代码
组件.html
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<!-- <form [formGroup]="userForm" (ngSubmit)="add(title.value,releaseYear.value))"> -->
<form #createForm="ngForm" (ngSubmit)=" createUser()" >
<div class="form-group" [class.has-error]="firstname.invalid && firstname.touched">
<label for="text">First name</label><br>
<input type="text" class="form-control" [(ngModel)]="user.user.first_name" name="firstname" required #firstname="ngModel" >
<span class="help-block" *ngIf="firstname.invalid && firstname.touched">
*First Name is required
</span>
</div>
<div class="form-group" [class.has-error]="lastname.invalid && lastname.touched">
<label for="text">Last name</label><br>
<input type="text" class="form-control" [(ngModel)]="user.user.last_name" name="lastname" required #lastname="ngModel">
<span class="help-block" *ngIf="lastname.invalid && lastname.touched">
*Last Name is required
</span>
</div>
<div class="form-group" [class.has-error]="email.invalid && email.touched">
<label for="text">Email</label><br>
<input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [(ngModel)]="user.user.email" name="email" required #email="ngModel">
<span class="help-block" *ngIf="email.invalid && email.touched">
*Email is required
</span> <br>
<span class="help-block" *ngIf="email.errors?.pattern">
*Invalid pattern
</span>
</div>
<div class="form-group" [class.has-error]="role.touched && role.invalid">
<label for="role">Role</label>
<select id="role" name="role"
class="form-control" required [(ngModel)]="user.role" #role="ngModel" >
<option *ngFor="let role of roles" [value]="role.name" >
{{role.name}}
</option>
</select>
<span class="help-block"
*ngIf="role.touched && role.invalid">
*Role is required
</span>
</div>
<button type="submit" [disabled]="createForm.invalid" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
组件.ts
//Create User
createUser() {
var data= this.user_data;
let user:any = {};
user["username"] = this.user.user.email
user["first_name"] = this.user.user.first_name
user["last_name"]= this.user.user.last_name
user["email"]= this.user.user.email
this.userData["user"] = user
this.userData["role"] = this.user.role
console.log(this.userData, "sending data")
this.Authentication.create_user(this.userData).subscribe(res=>{
// data.push(res);
this.getUsersFromServices();
// console.log(this.getUsersFromServices);
console.log('data received after creating user',res);
},
err =>{
console.error("Error creating user!");
// return Observable.throw(Error);
})
}
解决方案
我强烈建议使用 angulars 反应式表单,您的表单将更容易重构和实现,因为几乎所有逻辑都位于组件类中,并使用简化示例进行演示。首先以以下形式创建模板,当然你应该添加你的类,因为看起来你正在使用引导程序。
<div class="modal" #myModal>
<form #createForm="ngForm" (ngSubmit)=" createUser()" >
<div>
<label for="text">First name</label><br>
<input type="text" formControlName="name "required>
</div>
</form>
</div>
在组件类中使用创建表单
export class FormComponent {
createForm: FormGroup;
ViewChild('myModal') modal: ElementRef;
constructor() {
this.createForm = new FormGroup({
name: new FormControl(null),
email: new FormControl(null)
// etc
})
}
createUser() {
const userData = {
user: this.createForm.value;
role: // where you get role from
}
this.Authentication.create_user(userData).subscribe(res => {
this.modal.nativeElement.modal('hide');
});
}
}
随着ViewChild
您可以访问模式并且应该能够调用 bootstraps .modal('hide')
。
推荐阅读
- c++ - 解释 IEEE 754 数字的模定点算法如何工作
- java - 关闭应用程序后清除警报管理器设置的警报
- angular - 没有共享秘密的Angular Spring Oauth2没有Angular
- python - WMIC + Python 子进程/ (Windows 10)
- postgresql - 同一服务器上的 2 个数据库之间的 Postgres 复制
- loops - 做一个 while 循环,在 Dart/Flutter 中循环 1 秒
- c# - 将初始化步骤放在 ASP.NET Core Web Api 中的什么位置?
- plotly-dash - 悬停模式:“x 统一”不适用于 Dash
- css - @media 当我使用 888px 或更少时,我的媒体查询不起作用
- html - 导航栏比页面的其余部分长,导致空白