Проверка формы входа в angular

Я хотел бы поместить директиву * ngIf после кнопки входа в систему, которая будет отлавливать ошибки, сделанные функцией входа. Есть ли способ отобразить сообщение об ошибке с этим?

Ниже мой logincomponent.ts

constructor(private router: Router,
private loginService: LoginService,
private route: ActivatedRoute,
private fb: FormBuilder){}    

ngOnInit() {
this.form = this.fb.group({
username: [''],
password: ['']
});


signin(form) {
Auth.signIn(form.username, form.password).then(user => {
localStorage.setItem('access_token', user.signInUserSession.accessToken.jwtToken);
this.getUserInfo();
}).catch(err => console.log(err));
}

Ниже мой файл login.component.html

<div *ngIf="!adSignin">
      <form [formGroup]="form" (ngSubmit)="signin(form.value)">
        <h6 class="primary">Login</h6>
        <div>
          <mat-form-field class="full-width-input">
            <input matInput placeholder="User" formControlName="username" 
            autocomplete="univers-user" id="username">
          </mat-form-field>
        </div>
        <div>
          <mat-form-field class="full-width-input">
            <input matInput type="password" placeholder="Password" 
            formControlName="password" autocomplete="univers-password" id="password">
          </mat-form-field>
        </div>
        <button mat-raised-button color="primary">Login</button>
      </form>
    </div>
0
0
62
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Итак, вам нужно поймать ошибку внутри вашей службы / компонента и сохранить ошибку или просто сообщение об ошибке в переменной, а затем использовать его для отображения внутри div под кнопкой входа в систему.

И не забудьте установить для некоторого логического флага значение true, если у вас будет ошибка при входе в систему.

 <button mat-raised-button color="primary">Login</button>
      </form>
    </div>
    .....
    
    <div *ngIf="errorWhileLogin">
      <p>
        Some error while login:
        {{this.err.message}}
      </p>
    </div>

установите его внутри вашего метода обслуживания следующим образом:

this.getUserInfo();
}).catch(err => {

console.log(err)
this.errorWhileLogin = true;
this.error = err;
});

}

Попробуй это:

error: string;

constructor(private router: Router,
  private loginService: LoginService,
  private route: ActivatedRoute,
  private fb: FormBuilder
) {}

ngOnInit() {
  this.form = this.fb.group({
    username: [''],
    password: ['']
  });
}

async signin(form) {
  try {
    const user = await Auth.signIn(form.username, form.password);
    localStorage.setItem('access_token', user.signInUserSession.accessToken.jwtToken);
    this.getUserInfo();
  } catch (err) {
    this.error = err;
  }
}

Затем в шаблоне:

<div *ngIf="!adSignin">
  <form [formGroup]="form" (ngSubmit)="signin(form.value)">
    <h6 class="primary">Login</h6>
    <div>
      <mat-form-field class="full-width-input">
        <input matInput placeholder="User" formControlName="username" autocomplete="univers-user" id="username">
      </mat-form-field>
    </div>
    <div>
      <mat-form-field class="full-width-input">
        <input matInput type="password" placeholder="Password" formControlName="password" autocomplete="univers-password" id="password">
      </mat-form-field>
    </div>
    <div *ngIf="error">
      {{ error }}
    </div>
    <button mat-raised-button color="primary">Login</button>
  </form>
</div>

Другие вопросы по теме