0

我有模板参考模式,里面有模板驱动的表单。当我提交表单时,所有表单值都会打印在 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 上。

4

1 回答 1

0

使用 ngSubmit 的 Angular 提交表单。

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

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

演示

于 2020-07-01T07:56:14.480 回答