提姆寫程式

0%

Angular 筆記 - 登入頁跳轉

發表於 分類於 Disqus：
登入成功後跳轉頁面

login

本次練習一個表單驗證，並登入成功後的跳轉功能紀錄。

表單驗證

關於表單驗證的細節可以看 Angular 筆記 - Reactive Form 表單驗證實作，此篇以跳轉頁面功能的筆記為主。

信箱驗證

login.component.html

  1. 信箱為初始不要有驗證訊息。
  2. 信箱為必填欄位。
  3. 驗證錯誤為電子信箱的正規表達式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<label>
  <p>信箱</p>
  <input type="email" formControlName="email" pInputText />
  <small
    class="p-error"
    *ngIf="
                !loginForm.controls.email.pristine &&
                loginForm.controls.email.errors?.required
              "
    >請填寫信箱</small
  >
  <small
    class="p-error"
    *ngIf="
                !loginForm.controls.email.pristine &&
                loginForm.controls.email.hasError('pattern')
              "
    >信箱格式錯誤</small
  >
</label>

login.component.ts

  1. 建立表單的初始值與驗證欄位。
  2. 信箱使用的是信箱正規表達式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//*建立表單
 creatForm() {
   this.loginForm = this.formBuilder.group({
     name: ['', Validators.required],
     email: [
       '',
       Validators.compose([
         Validators.required,
         Validators.pattern(
           '^[a-zA-Z0-9.!#$%&』*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$'
         ),
       ]),
     ],
   });
 }

畫面跳轉

login.component.html

於登入頁按鈕給予一個點擊事件。

1
<button type="button" class="login-btn" (click)="toMain()">登入</button>

login.component.ts

  1. 給予跳轉頁面的判斷條件，如果登入表單是無效時，就給予登入失敗提示。
  2. 若有效則跳轉頁面。
  3. 跳轉頁面使用 router 的 navigate(導航) 方法，裡面用中括號並給予路由字串，即完成頁面跳轉。
1
2
3
4
5
6
7
8
9
toMain() {
    if (this.loginForm.invalid) {
      alert('登入失敗');
    } else {
      alert('登入成功');
      this.router.navigate(['/main']);
      this.reset();
    }
  }

登入錯誤提示

error

alert

登入成功提示

success