Angular 如何在登录失败时重置表单

我需要重置一些用于存储用户登录PIN的输入，我有一个生成带有错误消息的模式的服务，并且我能够清除用户名字段，但不能清除用于存储de PIN的输入，这些输入位于#输入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>

}

---

如何重置这些输入字段？

您可以使用NgForm

resetForm

方法重置表单值，这将重置所有表单元素

从'@angular/core'导入{Component，ViewChild}；
从'@angular/forms'导入{NgForm}；
...
@ViewChild（“表单”）表单：NgForm；//获取NgForm指令的引用
登录（）{
//const tempPass=this.password；
this.login.password=this.concatPassword（this.password）；
this.authService.login（this.login）
.订阅（res=>{
如果（！res.ok）{
此.from.resetForm（）；//可以使用NgForm
resetForm
方法重置表单值，这将重置所有表单元素

从'@angular/core'导入{Component，ViewChild}；
从'@angular/forms'导入{NgForm}；
...
@ViewChild（“form”）表单：NgForm；//获取NgForm指令的引用
登录（）{
//const tempPass=this.password；
this.login.password=this.concatPassword（this.password）；
this.authService.login（this.login）
.订阅（res=>{
如果（！res.ok）{
这是.from.resetForm（）；//我没有正确地理解您的问题您是想保存密码还是只重置所有表单值，您只需要使用
resetForm
method我想重置表单，如果用户/PIN错误，我没有正确地理解您的问题您是想保存密码还是只重置所有表单值，您只需要使用
resetForm
方法如果用户/PIN为wrong@NullEins乐意帮忙@NullEins乐意帮忙
  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);
  }
})