有一个问题一直困扰着我。我需要做一个小工作任务。
这是一个带有登录表单(用户名、密码和按钮)的登录页面(无需注册)。该按钮会触发一个 doLogin 函数，该函数检查用户名是否为 admin 且密码是否为 admin。如果用户名和密码正确，它允许您(重定向)到主页。如果用户名和密码不正确，则应在登录按钮下显示一条错误消息(用户名或密码不正确)。
我已经用验证器、FormBuilder 等尝试了很多东西。如果条件错误，我可以 console.log 消息，我只是不知道如何在登录页面上的按钮下显示它。
这是我的登录组件
登录.组件.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../_services/auth.service';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
username!: string;
password!: string;
formData!: FormGroup;
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
this.formData = new FormGroup({
username: new FormControl("admin", [Validators.required]),
password: new FormControl("admin", [Validators.required])
});
}
doLogin(data: any) {
this.username = data.username;
this.password = data.password;
console.log("Login page: " + this.username);
console.log("Login page: " + this.password);
this.authService.login(this.username, this.password)
.subscribe(data => {
console.log("Is Login Success: " + data);
if (data) this.router.navigate(['/home'])
});
}
}
登录.component.html:
<!-- Page Content -->
<div id="wrapper">
<body>
<div class="card card-container">
<img id="profile-img" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" class="profile-img-card" />
<div class="row">
<div class="col-lg-12 text-center" style="padding-top: 20px;">
<div class="container box" style="margin-top: 10px; padding-left: 0px; padding-right: 0px;">
<div class="row">
<div class="col-12" style="text-align: center;">
<form [formGroup]="formData" (ngSubmit)="doLogin(formData.value)" class="form-signin">
<h2 class="form-signin-heading">Prijava</h2>
<label for="inputEmail" class="sr-only">Username</label>
<input class="form-control" type="text" id="username" class="form-control"
formControlName="username" placeholder="Username" required autofocus />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control"
formControlName="password" placeholder="Password" required>
<div *ngIf="false">
Password must be at least 6 characters
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
这是应用程序运行时我的登录页面和表单:
有人可以帮我吗？
干杯，谢谢。
最佳答案
使用AbstractControl.setErrors()设置自定义错误:
Sets errors on a form control when running validations manually, rather than automatically.
this.formData.setErrors({ unauthenticated: true });
接下来，当 unauthenticated 为 true 时，在 HTML 中显示错误消息:
<div *ngIf="formData.errors?.unauthenticated">
Username or Password incorrect!
</div>
login.component.ts
doLogin(data: any) {
...
this.authService.login(this.username, this.password).subscribe((data) => {
console.log('Is Login Success: ' + data);
if (data) this.router.navigate(['/home']);
else this.formData.setErrors({ unauthenticated: true });
});
}
<form
[formGroup]="formData"
(ngSubmit)="doLogin(formData.value)"
class="form-signin"
>
...
<button
class="btn btn-lg btn-primary btn-block"
type="submit"
>
Login
</button>
<div *ngIf="formData.errors?.unauthenticated">
Username or Password incorrect!
</div>
</form>
关于angular - 当 Angular 中的条件错误(静态用户名和密码)时，在登录按钮下显示错误消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69777737/