0

i have template ref modal with template driven form inside it. when i submit the form, all form value gets printed on url

http://localhost:4200/admin/users?userName=test&userEmail=test@test.com&userPassword=147258369

below is my html code for button to open modal:

<td>
<button class="btn btn-primary" (click)="editUsersModal(editUsersTemplate, users.userId, i)">Edit</button>
</td>

below is my html code for modal:

<ng-template #editUsersTemplate>
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal" (click)="modalRef.hide()">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editUserForm="ngForm" (submit)="editUserSubmit()">
            <div class="form-group">
                <label>User-name</label>
                <input type="text" name="userName" autocomplete="off" class="form-control" #userName="ngModel" ngModel required>
                <p class="text-danger" *ngIf="userName.touched && !userName.valid">Please enter your User-name!</p>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="userEmail" autocomplete="off" class="form-control" #userEmail="ngModel" ngModel email required>
                <p class="text-danger" *ngIf="userEmail.touched && !userEmail.valid">Please enter your email!</p>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="userPassword" autocomplete="off" class="form-control" #userPassword="ngModel" ngModel required>
                <p class="text-danger" *ngIf="userPassword.touched && !userPassword.valid">Please enter your password!</p>
            </div>
            <input type="submit" value="Change" class="btn btn-info" [disabled]="!editUserForm.valid">
        </form>  
      </div>
    </div>
</ng-template>

below is my ts code:

public modalRef: BsModalRef;
  editUsersModal(editUsersTemplate, userId, index){
    this.modalRef = this.modalService.show(editUsersTemplate);
  }

  editUserSubmit(){
    console.log(this.editUserForm.value);
    this.modalRef.hide();
  }

after submission page refreshes and i dont get anything on console log as expected and all form values is printed on url.

conrad
  • 51
  • 8

1 Answers1

0

Using ngSubmit of angular to submit the form.

Optional: novalidate could also be used to prevent default HTML validation, using angular form validation instead

<form novalidate (ngSubmit)="editUserSubmit()" >

Demo

huan feng
  • 7,307
  • 2
  • 32
  • 56