Question

我有模版参考模态，里面有模版驱动形式。当我提交表单时，所有表单值都会打印在网址上

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>

以下是我的modal的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验证，而应使用角度形式验证

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

Demo

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

1 个答案: