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