Angular表單

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

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

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

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

解決方案

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

表單對(duì)象

首先導(dǎo)入模塊

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

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

FormControl

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

// 創(chuàng)建一個(gè)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集合,提供一個(gè)總的接口方位group中所有formControl的值和狀態(tài);

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92586.html

相關(guān)文章

angular表單驗(yàn)證2

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

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

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

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

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

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

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

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

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

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

摘要：在里我們簡(jiǎn)單保存了對(duì)回調(diào)函數(shù)的引用，回調(diào)函數(shù)是由指令傳入的譯者注參考，只要每次組件值發(fā)生改變，就會(huì)觸發(fā)這個(gè)回調(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 評(píng)論0 收藏0