摘要:上一章通過用戶注冊講解了響應式表單,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。
上一章通過用戶注冊講解了響應式表單ReactiveForm,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。
提交注冊信息向服務器提交信息是通過模板中標簽中的(ngSubmit)="onSubmit()進行提交的。在填寫好正確的信息后,按鈕會變為可用狀態,點擊按鈕后,onSubmit()方法就會得到執行,onSubmit()方法的代碼為:
onSubmit() { this.user = this.prepareSaveUser(); this.userSer.saveUser(this.user).subscribe( () => { this.tokenServ.setToken(value["token"]); this.router.navigate(["/birthday"]); alert("注冊成功!"); }, (err) => alert(this.userSer.handleError(err)), () => { console.log("The post observable is now completed."); } );
prepareSaveUser()方法用于將FormGroup類型對象registForm的屬性值賦給一個User對象,并返回這個對象,用于發送用戶數據(利用FormGroup構建響應式表單的內容,請看第七章的內容)。prepareSaveUser()方法的代碼如下:
prepareSaveUser(): User { const formModel = this.registForm.value; const saveUser: User = { id: this.user.id, name: formModel.name as string, password: formModel.password as string, email: formModel.email }; return saveUser; }
把prepareSaveUser()方法的返回值賦值給User對象之后,調用UserService類的saveUser()方法,將注冊信息發送到服務器(關于UserService服務類,請看第五章的內容)。如果注冊成功,服務器會返回一個token字符串,存儲了從服務器獲取需要用戶認證的內容時憑證。利用AuthTokenService的setToken()方法將這個憑證存儲到本地。AuthTokenService類的代碼:
import { Injectable } from "@angular/core"; @Injectable() export class AuthTokenService{ setToken(token:string){ sessionStorage.removeItem("token"); if((token as string).length != 0){ sessionStorage.token = token; console.log("sessionStorage.token: " + sessionStorage.token); } } getToken(){ if(sessionStorage.token){ return sessionStorage.token; }else{ return null; } } }
AuthTokenService類是一個服務類,因為其他模塊也需要用到,將它放到AppModule的providers數組中:
@NgModule({ declarations: [ ... ], imports: [ ... ], providers: [ ... AuthTokenService ], bootstrap: [AppComponent] }) export class AppModule { }
這個服務提供商的主要工作就是將token的值存儲到sessionStorage中,在需要的時候進行取出。 sessionStorage針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。
如果在注冊過程中發現錯誤,就在對話框中顯示UserService的handleError()方法返回的錯誤提示信息。
如果注冊成功,就調用Router類的navigate()方法,跳轉到/birthday的url,進入BirthdaysModule模塊。
重置Form如果需要重新填寫表單內容,按Cancel按鈕后,將觸發revert()方法,代碼如下:
reset() { this.user = new User(0, "", "", ""); this.registForm.reset({ name: this.user.name, password: this.user.password, email: this.user.email }) }
這里主要調用了FormGroup類的reset()方法,將所有屬性值設為this.user對象的屬性值,從而實現表單的重置。
總結用戶注冊的內容大致就是這些,主要知識包括angular的HttpClient、ReactForm兩方面的知識。下一章將要講解用戶登錄的內容,在用戶登錄表單中,我將使用模板驅動型表單進行操作。敬請期待......
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115790.html
摘要:上一章通過用戶注冊講解了響應式表單,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。 上一章通過用戶注冊講解了響應式表單ReactiveForm,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。 提交注冊信息 向服務器提交信息是通過模板中標簽中的(ngSubmit)=onSu...
摘要:后臺注冊成功后,會返回狀態的認證信息。后臺數據的處理,詳見利用和構建一個簡單的網站三訪問。在這個方法中分別針對這兩種錯誤進行處理。 上一節簡單介紹了一下利用angular構建的主路由模塊,根據上一節的介紹,主頁面加載時直接跳轉到用戶管理界面,下面就來介紹一下用戶管理模塊。啟動應用后,初始界面應該是這樣的: showImg(https://segmentfault.com/img/bV3...
摘要:后臺注冊成功后,會返回狀態的認證信息。后臺數據的處理,詳見利用和構建一個簡單的網站三訪問。在這個方法中分別針對這兩種錯誤進行處理。 上一節簡單介紹了一下利用angular構建的主路由模塊,根據上一節的介紹,主頁面加載時直接跳轉到用戶管理界面,下面就來介紹一下用戶管理模塊。啟動應用后,初始界面應該是這樣的: showImg(https://segmentfault.com/img/bV3...
閱讀 2216·2021-09-07 09:58
閱讀 3391·2019-08-30 14:07
閱讀 1305·2019-08-29 12:32
閱讀 667·2019-08-29 11:06
閱讀 3692·2019-08-26 18:18
閱讀 3730·2019-08-26 17:35
閱讀 1381·2019-08-26 11:35
閱讀 611·2019-08-26 11:35