带有模板驱动表单的 ngx-bootstrap 模板模式，提交问题

Question

我有模板引用模式，里面有模板驱动的表单。 当我提交表单时，所有表单值都会打印在 url 上

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

下面是我的按钮打开模式的html代码：

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

下面是我的模态html代码：

<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>

下面是我的ts代码：

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

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

提交页面刷新后，我没有按预期在控制台日志上得到任何内容，并且所有表单值都打印在 url 上。

Answer 1

使用angular的ngSubmit提交表单。

可选：也可以使用 novalidate 来阻止默认的 HTML 验证，而是使用 Angular 表单验证

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

Demo