我有一個一直困擾著我的問題。我需要為作業做一個小任務。
所以它是一個帶有登錄表單（用戶名、密碼和按鈕）的登錄頁面（無需注冊）。該按鈕會觸發一個doLogin函式，檢查用戶名是否為 admin，密碼是否為 admin。如果用戶名和密碼正確，它允許您（重定向）到主頁。如果用戶名和密碼不正確，則應在登錄按鈕下方顯示錯誤訊息（用戶名或密碼不正確）。
我已經用驗證器、FormBuilder 和其他東西嘗試了很多東西。如果條件錯誤，我可以 console.log 訊息我只是不知道如何在登錄頁面上的按鈕下顯示它。
這是我的登錄組件
登錄.component.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 >
<img id="profile-img" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" />
<div >
<div style="padding-top: 20px;">
<div style="margin-top: 10px; padding-left: 0px; padding-right: 0px;">
<div >
<div style="text-align: center;">
<form [formGroup]="formData" (ngSubmit)="doLogin(formData.value)" >
<h2 >Prijava</h2>
<label for="inputEmail" >Username</label>
<input type="text" id="username"
formControlName="username" placeholder="Username" required autofocus />
<label for="inputPassword" >Password</label>
<input type="password" id="inputPassword"
formControlName="password" placeholder="Password" required>
<div *ngIf="false">
Password must be at least 6 characters
</div>
<button type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
這是我的登錄頁面和應用程式運行時的表單：
如果通過且用戶名不是 admin, admin，則在此藍色登錄按鈕下應顯示錯誤訊息
有人可以幫我嗎？
干杯和謝謝你。
uj5u.com熱心網友回復：
使用AbstractControl.setErrors()設定自定義錯誤：
手動而不是自動運行驗證時在表單控制元件上設定錯誤。
this.formData.setErrors({ unauthenticated: true });
接下來，在 HTML 中顯示錯誤資訊的時候unauthenticated是true：
<div *ngIf="formData.errors?.unauthenticated">
Username or Password incorrect!
</div>
登錄.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)"
>
...
<button
type="submit"
>
Login
</button>
<div *ngIf="formData.errors?.unauthenticated">
Username or Password incorrect!
</div>
</form>
StackBlitz 上的示例演示
uj5u.com熱心網友回復：
有很多選擇可以做到這一點。我列出了最簡單的解決方案。
- 第一個選項
您可以在登錄按鈕下創建一個 HTML 元素，如下所示。
<mat-error *ngIf="showError">username or password are not correct</mat-error>
然后在您的組件檔案中，創建一個變數（在 formData 下！：FormGroup;）
showError: boolean = false;
然后在您的訂閱中，在 console.log() 之后
this.showError =true;
- 第二種選擇
如果您不想將訊息硬輸入到您的模板中，您可以執行以下操作。
在您的組件模板 HTML 檔案中。
<mat-error *ngIf="showError">{{message}}</mat-error>
然后在您的組件檔案中，創建這些變數（在 formData 下！：FormGroup;）
showError: boolean = false;
message:string;
然后在您的訂閱中，在 console.log() 之后
if (data) {
this.router.navigate(['/home'])
} else {
this.showError = true;
// this.message = data;
Or
this.message = "username or password are not correct";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/342740.html