so basically I have a modal that houses a sign up form (reactive angular form). I have set it so that when the registration process is complete and the button is clicked, the details of the person are sent to the server. Thing is, when I introduce the attribute data-dismiss="modal" to the button, the data dismiss attribute is applied before the data is transferred to the server which causes the information to not register and the modal to close.
Any idea how to resolve this?
<div> <form [formGroup]="newUser2" (ngSubmit)='onSubmit2()' *ngIf="verification!=false"> <label>Street</label> <br> <input type="text" placeholder="Please Input Street for Delivery" formControlName="Street"> <br> <label>First Name</label> <br> <input type="text" placeholder="First Name here" formControlName="FirstName"> <br> <label>Last Name</label> <br> <input type="text" placeholder="Last Name here" formControlName="LastName"> <br> <input type="submit" class="btn btn-success" [disabled]="!newUser2.valid" data-dismiss="modal"> </form> </div> onSubmit2(){ this.finalUser=({...this.newUser.value,...this.newUser2.value}); this.RS.RegisterUser(this.finalUser).subscribe( ) } } After comments, modified the files around but the modal is still not closing manually. I think I must've made a mistake with the bootstrap integration.
Here's the component.ts-
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { matchOtherValidator } from '../match-other-validator'; import { HttpClient } from '@angular/common/http'; import { of } from 'rxjs'; import { map,take,switchMap} from 'rxjs/operators'; import { RegisterService } from '../register.service'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap' const tzAsyncValidator = (http: HttpClient) => (c: FormControl) => { console.log(c.parent); if (!c || String(c.value).length === 0) { console.log("!c|| String (c.value).length ===0") return of(null); } return c.valueChanges.pipe( take(1), switchMap(_ => http.get('http://localhost:4000/userIds/' + String(c.value)) .pipe( map((ids: any[]) => { console.log(ids); if (ids.length === 1) { return { exists: true } } if (ids.length === 0) { return null; } })) )) } @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit { public newUser; public verification=false; public newUser2; public finalUser; constructor(private http: HttpClient, public RS:RegisterService, public activeModal: NgbActiveModal) { } ngOnInit() { this.newUser = new FormGroup({ Tz: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(9)], [tzAsyncValidator(this.http)]), Email: new FormControl('', [Validators.required, Validators.email]), PW: new FormControl('', [Validators.required, Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$')]), PWVerification: new FormControl('', [Validators.required, Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'), matchOtherValidator('PW')]) }) } onSubmit(){ this.verification=true; this.newUser2= new FormGroup({ City: new FormControl ('',Validators.required), Street: new FormControl('',Validators.required), FirstName: new FormControl('',Validators.required), LastName: new FormControl('',Validators.required) }) } onSubmit2(){ this.finalUser=({...this.newUser.value,...this.newUser2.value}); this.RS.RegisterUser(this.finalUser) .subscribe(()=>{ this.activeModal.close(); }) } } Here's the component.html-
<!-- Modal --> <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true" data-toggle="modal" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Sign Up!</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form [formGroup]="newUser" (ngSubmit)='onSubmit()' *ngIf="verification!=true"> <label>ID</label> <br> <input type="text" placeholder="Please Enter Your ID" formControlName="Tz"> <br> <label>Email</label> <br> <input type="email" placeholder="Please Enter Your Email" formControlName="Email"> <br> <label>Password</label> <br> <input type="text" name="password" placeholder="Please Choose A Password" formControlName="PW" size="25"> <br> <label>Resubmit Your Password</label> <br> <input type="text" name="confirmPassword" placeholder="Please Resubmit Your Password" formControlName="PWVerification" validateEqual="password" size="30"> <br> <input type="submit" class="btn btn-success" [disabled]="!newUser.valid"> <br> <span *ngIf="newUser.get('Email').invalid &&!newUser.get('Email').pristine">Your email does not look right</span> <br> <span *ngIf="newUser.get('Tz').errors?.maxlength ||newUser.get('Tz').errors?.minlength ">Your ID must contain 9 digits</span> <br> <span *ngIf="newUser.get('PW').invalid&&!newUser.get('PW').pristine">Password must include at least one letter and one digit</span> <br> <span *ngIf="newUser.get('PWVerification').errors?.matchOther">Your submitted passwords don't match</span> <br> <span *ngIf="newUser.get('Tz').errors?.exists">This ID already exists</span> </form> <form [formGroup]="newUser2" *ngIf="verification!=false"> <label>City</label> <br> <input list="City" name="City" formControlName="City" placeholder="Choose City"> <datalist id="City"> <option value="Jerusalem"> <option value="Tel Aviv"> <option value="Haifa"> <option value="Rishon LeZion"> <option value="Petach Tikva"> <option value="Ashdod"> <option value="Netanya"> <option value="Be'er Sheva"> <option value="Holon"> <option value="Bnei Brak"> </datalist> <br> <label>Street</label> <br> <input type="text" placeholder="Please Input Street for Delivery" formControlName="Street"> <br> <label>First Name</label> <br> <input type="text" placeholder="First Name here" formControlName="FirstName"> <br> <label>Last Name</label> <br> <input type="text" placeholder="Last Name here" formControlName="LastName"> <br> <input type="submit" class="btn btn-success" [disabled]="!newUser2.valid" (click)="onSubmit2()"> </form> </div> <div class="modal-footer"> </div> </div> </div> here's the app.module.ts-
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule} from '@angular/common/http'; import { RegisterComponent } from './register/register.component'; import {NgbModule, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ AppComponent, RegisterComponent, ], imports: [ BrowserModule, AppRoutingModule, ReactiveFormsModule, HttpClientModule, NgbModule ], providers: [NgbActiveModal], bootstrap: [AppComponent] }) export class AppModule { } as well as the index.html-
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>YoavOnlineShop</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> 
