Angular表單

dackel 發(fā)布于2019-08-22 13:53 / 3153人閱讀

摘要：中的表單復(fù)雜解決方案原因表單輸入意味著需要在頁面和服務(wù)器端同時修改這份數(shù)據(jù)修改的內(nèi)容通常要在頁面的其他地方反映出來用戶的輸入可能存在很多問題需要驗證輸入的內(nèi)容用戶界面需要清晰地顯示出可能出現(xiàn)的預(yù)期結(jié)果和錯誤信息字段之間的依賴可能存在復(fù)雜的業(yè)

Angular中的表單 復(fù)雜&解決方案 原因

表單輸入意味著需要在頁面和服務(wù)器端同時修改這份數(shù)據(jù)
修改的內(nèi)容通常要在頁面的其他地方反映出來
用戶的輸入可能存在很多問題,需要驗證輸入的內(nèi)容
用戶界面需要清晰地顯示出可能出現(xiàn)的預(yù)期結(jié)果和錯誤信息
字段之間的依賴可能存在復(fù)雜的業(yè)務(wù)邏輯
我們希望不依賴DOM選擇器就能輕松測試表單

解決方案

表單控件(FormControl)封裝了表單中的輸入,并提供了一些可供操縱的對象
驗證器(Validator)讓我們能以自己喜歡的任何方式驗證表單輸入
觀察者(Observer)讓我們能夠監(jiān)聽表單的變化,并做出相應(yīng)的回應(yīng)

表單對象

首先導(dǎo)入模塊

// 導(dǎo)入
import { FormControl, FormGroup } from "@angular/forms";

// 注意: module模塊中必須在imports中加入FormsModule
// app.module.ts
@NgModule({
    ...
    imports: [
        BrowserModule,      // 在瀏覽器中運行所需模塊
        FormsModule,        // 表單所需模塊
        ReactiveFormsModule // 響應(yīng)式表單所需模塊
    ]
    ...
})

FormControl

代表了單一的輸入字段,例如: .其中封裝了該字段的值和狀態(tài)
例如:

// 創(chuàng)建一個FormControl
let nameControl = new FormControl("name");
nameControl.value;  // => "name"
nameControl.errors; // => null || StringMap of errors
nameControl.dirty;  // => true || false
nameControl.valid;  // => true || false

FormGroup

一組FormControl集合,提供一個總的接口方位group中所有formControl的值和狀態(tài);

// 定義一個FormGroup
let pserson = new FormGroup({
    firstName: new FormControl("zhou"),
    lastName: new FormControl("zhou")
});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92586.html

相關(guān)文章

angular表單驗證2

摘要：表單驗證使用場景在實際的開發(fā)中我們可能會有這樣的情況。姓名不能為空姓名太短姓名太長姓名不能為空姓名太短姓名太長借助表單本身比之前的更簡單了。結(jié)尾以上就是關(guān)于表單驗證的全部內(nèi)容。前言在之前的文章《angular表單驗證》中主要介紹了一些關(guān)于angular表單驗證的基礎(chǔ)知識。在此篇中將著重以擴展angular表單驗證的相關(guān)內(nèi)容和實際開發(fā)中的應(yīng)用為主。表單驗證使用場景1 在實際的開發(fā)...

darkbug 2019-08-19 17:41 評論0 收藏0
angular4 學(xué)習(xí)記錄 -- 表單

摘要：在表單上添加的會攔截標(biāo)準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個單獨的表單控件的值和有效性狀態(tài)。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調(diào)用來顯示驗證失敗信息。 angular4 表單模板表單在app.module中導(dǎo)入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表...

james 2019-08-21 16:45 評論0 收藏0
angular6的響應(yīng)式表單

摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗證器函數(shù)響應(yīng)式表單包含了一組開箱即用的常用驗證器函數(shù)。這些驗證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應(yīng)式表單

摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗證器函數(shù)響應(yīng)式表單包含了一組開箱即用的常用驗證器函數(shù)。這些驗證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應(yīng)式表單

摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗證器函數(shù)響應(yīng)式表單包含了一組開箱即用的常用驗證器函數(shù)。這些驗證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 評論0 收藏0
[譯] 別再對 Angular 表單的 ControlValueAccessor 感到迷惑

摘要：在里我們簡單保存了對回調(diào)函數(shù)的引用，回調(diào)函數(shù)是由指令傳入的譯者注參考，只要每次組件值發(fā)生改變，就會觸發(fā)這個回調(diào)函數(shù)。原文鏈接：Never again be confused when implementing ControlValueAccessor in Angular?forms showImg(https://segmentfault.com/img/bV7rR7?w=400...

blastz 2019-08-22 15:57 評論0 收藏0