In the process of implementing a CRUD operation, I am trying to automatically close the modal upon submission. Using data-dismiss on the submit button only closes the modal without executing the functionality. What I need is for the functionality to execute and then have the modal closed as well.
Below is the code snippet:
component.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 #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>
component.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);
})
}