資訊專欄INFORMATION COLUMN
摘要：在表單上添加的會攔截標準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個多帶帶的表單控件的值和有效性狀態。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調用來顯示驗證失敗信息。
angular4 表單 模板表單
在app.module中導入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表單。
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [
CommonModule,
FormsModule
],
exports: [],
declarations: []
})
export class AppModule { }
在表單上添加的ngForm會攔截標準的hmlt表單提交事件。
ngModel和FormControl在表單元素中添加了ngmodel屬性，這代表著創建了一個FormControl控件。
將第一步中的控件放至form中,Form會自動將該FormControl控件注冊為Form的子控件。只有表單元素上在添加了ngModel的基礎上再添加name屬性，才會將name=“nickname”的字段添加至表單控件上。
例：
{{myForm.value | json}} //這里將以{{"nickname": xxx}}輸出input輸入框中的內容
單向數據綁定
具體使用`[ngModel]="xxx"`
雙向數據綁定
具體使用`[(ngModel)]="xxx"`ngModelGroup
簡單來說，是一組 FormControl
響應式表單 響應式表單中一些常用的類AbstractControl是三個具體表單類的抽象基類。 并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象（Observable）。
FormControl 用于跟蹤一個多帶帶的表單控件的值和有效性狀態。它對應于一個HTML表單控件，比如輸入框和下拉框。
FormGroup用于 跟蹤一組AbstractControl的實例的值和有效性狀態。 該組的屬性中包含了它的子控件。 組件中的頂級表單就是一個FormGroup。
FormArray用于跟蹤AbstractControl實例組成的有序數組的值和有效性狀態。
具體使用在使用響應式表單之前，也需要在app.module中添加import。
import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
// 省略其他
imports: [..., ReactiveFormsModule],
// 省略其他
})
// 省略其他
區別：響應式表單與模板表單最大的區別在于響應式表單并不是直接地將form中的value直接綁定在html中的標簽上，而是只是簡單地聲明了一下formControlName，再在component上將對應的formControlName的表單元素實例化FormControl
ngOnInit() {
// 初始化表單
this.user = new FormGroup({
email: new FormControl("", [Validators.required, Validators.pattern(/([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}/)]),
password: new FormControl("", [Validators.required]),
repeat: new FormControl("", [Validators.required]),
address: new FormGroup({
province: new FormControl(""),
city: new FormControl(""),
area: new FormControl(""),
addr: new FormControl("")
})
});
}
FomBuilder
FormBuilder的存在就是為了能夠快速構建表單。具體使用形式：
constructor(private fb: FormBuilder) {}
ngOnInit() {
// 初始化表單
this.user = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", Validators.required],
repeat: ["", Validators.required],
address: this.fb.group({
province: [],
city: [],
area: [],
addr: []
})
});
}
表單驗證
目前Angular支持的內置validate屬性：
required - 設置表單控件值是非空的
email - 設置表單控件的格式是email
minlength - 設置表單控件值的最小長度
maxlength - 設置表單控件長度的最大值
pattern - 設置表單控件的值需匹配 pattern 對應的模式
如何判斷驗證的結果通過表單控件的.valid判斷驗證結果，其結果狀態：
valid - 有效
invalid - 無效
pristine - 表單值未改變
dirty - 表單值已改變
touched - 表單控件已被訪問過
untouched - 表單控件未被訪問過
如果顯示驗證失敗的信息可以直接在html中編寫驗證信息，通過設置[hidden]="!formModel.hasError("驗證結果")"屬性來顯示。
在表單所在的component中的fomModel上添加{validator: xxxValidat0or}，再在指定的xxxValidator驗證方法中調用description來顯示驗證失敗信息。
例：{password: {description: "密碼和確認密碼不匹配"}}
可以通過以下類選擇器添加相應的樣式：
.ng-valid
.ng-invalid
.ng-pristine
.ng-dirty
.touched
.untouched
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88688.html
摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。 作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。 作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。 作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要：好了，廢話少說，繼續吧這一章主要講利用控制用戶登錄。在前面的用戶注冊表單中使用了的響應式表單。在構造函數中聲明了一個對象一個對象和對象對象。并在構造函數中用的方法更新了網頁的標題。接下來導航到下一個頁面，并提示用戶登錄成功。 最近工作比較忙，一直沒有更新文章。原來看別人的文章感覺很過癮，現在自己寫才發現，要堅持下去真的很難。好了，廢話少說，繼續吧！這一章主要講利用angularJs控制...
閱讀 1831·2021-11-23 09:51
閱讀 951·2021-10-08 10:05
閱讀 3437·2021-09-26 09:55
閱讀 1045·2021-09-22 15:21
閱讀 1638·2021-09-09 09:33
閱讀 1282·2019-08-30 15:56
閱讀 1290·2019-08-30 15:55
閱讀 973·2019-08-30 13:19
