Как сбросить угловую форму при неудачной авторизации - PullRequest
Новая
       23

Как сбросить угловую форму при неудачной авторизации

1 голос
/ 20 сентября 2019

Мне нужно сбросить некоторые входные данные, которые я использую для хранения PIN-кода входа от пользователя, у меня есть служба, которая генерирует модальное сообщение с сообщением об ошибке, и я могу очистить поле имени пользователя, но не входные данныечто я использую для хранения де PIN, которые находятся под идентификатором #inputs.Пожалуйста, проверьте мой код ниже.

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);
  }
})

}

Как мне сбросить эти поля ввода?

1 Ответ

0 голосов
/ 20 сентября 2019

вы можете использовать метод 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);
  }
});
}

вам нужно удалить эту опцию [ngModelOptions]="{standalone: true}" и установить атрибут имени

демо ??

...