如何在登录失败时重置 Angular 表单
How to reset Angular form when login fails
我需要重置一些用于存储用户登录 PIN 的输入,我有一个生成带有错误消息的模式的服务,并且我能够清除用户名字段,但不能我用来存储 de PIN 的输入,位于 #inputs id 下。请检查下面我的代码。
HTML
<form class="form-horizontal form-material" id="loginForm" ngNaviteValidate #form="ngForm" (ngSubmit)="logIn(); loginForm.reset()">
<a class="text-center db"><img src="../assets/images/LOGO.png" style="width: 52%;" alt="Home" /></a>
<div class="form-group m-t-40">
<div class="col-xs-12">
<h4>USUARIO</h4>
<input class="form-control" id="userName" type="text" placeholder="Nombre de usuario" [(ngModel)]="login.username"
[ngModelOptions]="{standalone: true}" required>
<br>
<br>
<h4>PIN</h4>
<div class="inputs form-control" id="inputs">
<input maxlength="2" placeholder="•" value="" type="password" id="pinOne" [(ngModel)]="password[0]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinTwo" [(ngModel)]="password[1]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinThree" [(ngModel)]="password[2]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinFour" [(ngModel)]="password[3]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinFive" [(ngModel)]="password[4]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="1" placeholder="•" value="" type="password" id="pinSix" [(ngModel)]="password[5]"
[ngModelOptions]="{standalone: true}" required>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-md btn-block text-uppercase btn-rounded"
type="submit">Ingresar</button>
</div>
</div>
</form>
Component.ts
logIn() {
this.login.password = this.concatPassword(this.password);
this.authService.login(this.login)
.subscribe(res => {
if (!res.ok) {
// This clean the username but not the PIN
this.login.username = '';
this.login.password = '';
this.password = [];
} else {
this.messageWelcome(res.user);
}
})
}
我应该如何重置这些输入字段?
您可以使用 NgForm resetForm
方法重置表单值,这将重置所有表单元素。
import { Component,ViewChild } from '@angular/core';
import { NgForm} from '@angular/forms';
...
@ViewChild("form") form: NgForm; // get reference of the NgForm directive
logIn() {
// const tempPass = this.password;
this.login.password = this.concatPassword(this.password);
this.authService.login(this.login)
.subscribe(res => {
if (!res.ok) {
this.from.resetForm(); //
// you don't need to reset the login manually
// this.login.username = '';
// this.login.password = '';
// this.password = [];
} else {
this.messageWelcome(res.user);
}
});
}
you need to remove this option [ngModelOptions]="{standalone: true}"
and set the name attribute
我需要重置一些用于存储用户登录 PIN 的输入,我有一个生成带有错误消息的模式的服务,并且我能够清除用户名字段,但不能我用来存储 de PIN 的输入,位于 #inputs id 下。请检查下面我的代码。
HTML
<form class="form-horizontal form-material" id="loginForm" ngNaviteValidate #form="ngForm" (ngSubmit)="logIn(); loginForm.reset()">
<a class="text-center db"><img src="../assets/images/LOGO.png" style="width: 52%;" alt="Home" /></a>
<div class="form-group m-t-40">
<div class="col-xs-12">
<h4>USUARIO</h4>
<input class="form-control" id="userName" type="text" placeholder="Nombre de usuario" [(ngModel)]="login.username"
[ngModelOptions]="{standalone: true}" required>
<br>
<br>
<h4>PIN</h4>
<div class="inputs form-control" id="inputs">
<input maxlength="2" placeholder="•" value="" type="password" id="pinOne" [(ngModel)]="password[0]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinTwo" [(ngModel)]="password[1]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinThree" [(ngModel)]="password[2]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinFour" [(ngModel)]="password[3]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="2" placeholder="•" value="" type="password" id="pinFive" [(ngModel)]="password[4]"
[ngModelOptions]="{standalone: true}" required>
<input maxlength="1" placeholder="•" value="" type="password" id="pinSix" [(ngModel)]="password[5]"
[ngModelOptions]="{standalone: true}" required>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-md btn-block text-uppercase btn-rounded"
type="submit">Ingresar</button>
</div>
</div>
</form>
Component.ts
logIn() {
this.login.password = this.concatPassword(this.password);
this.authService.login(this.login)
.subscribe(res => {
if (!res.ok) {
// This clean the username but not the PIN
this.login.username = '';
this.login.password = '';
this.password = [];
} else {
this.messageWelcome(res.user);
}
})
}
我应该如何重置这些输入字段?
您可以使用 NgForm resetForm
方法重置表单值,这将重置所有表单元素。
import { Component,ViewChild } from '@angular/core';
import { NgForm} from '@angular/forms';
...
@ViewChild("form") form: NgForm; // get reference of the NgForm directive
logIn() {
// const tempPass = this.password;
this.login.password = this.concatPassword(this.password);
this.authService.login(this.login)
.subscribe(res => {
if (!res.ok) {
this.from.resetForm(); //
// you don't need to reset the login manually
// this.login.username = '';
// this.login.password = '';
// this.password = [];
} else {
this.messageWelcome(res.user);
}
});
}
you need to remove this option
[ngModelOptions]="{standalone: true}"
and set the name attribute