表單處理
- 模板式表單
- 響應式表單
- 表單校驗
模板式表單需要在app.module.ts中引入FormsModule;
響應式表單中需要在app.module.ts中引入ReactiveFormsModule;
image.png
模板式表單
- NgForm
- NgModel
- NgModelGroup
在form 標簽中加 ngNoForm可以取消angular對表單的接管
代碼樣例：
//模板中
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用戶名：<input ngModel name="username" type="text"></div>
<div>手機號：<input ngModel name="mobile" type="number"></div>
<div ngModelGroup="passwordsGroup">
<div>密碼：<input ngModel name="password" type="password"></div>
<div>確認密碼：<input ngModel name="pconfirm" type="password"></div>
</div>
<button type="submit">注冊</button>
</form>
<div>
{{myForm.value | json}}
</div>
<br>
<div>
{{username.value}}
</div>
//組件中
onSubmit(item:any){
console.log(item);
}
響應式表單
- FormControl - 它是一個為單個表單控件提供支持的類痹届，可用于跟蹤控件的值和驗證狀態(tài)淡溯，此外還提供了一系列公共API脚仔。
使用示例：
ngOnInit() {
this.myControl = new FormControl('Semlinker');
}
- FormGroup - 包含是一組 FormControl 實例琳水，可用于跟蹤 FormControl 組的值和驗證狀態(tài)，此外也提供了一系列公共API疾层。
使用示例：
ngOnInit() {
this.myGroup = new FormGroup({
name: new FormControl('Semlinker'),
location: new FormControl('China, CN')
});
}
- FormArray - 包含是一組 FormControl 數(shù)組集合蝌戒。
定義示例：
...
//FormControl
username:FormControl = new FormControl('aaa');
//FormControl
formModel:FormGroup = new FormGroup({
from:new FormControl(),
to:new FormControl(),
});
//FormArray
emails:FormArray = new FormArray([
new FormControl("a@a.com"),
new FormControl("b@b.com"),
]);
...
用到的相關綁定指令
圖中第二列指令是屬性綁定
第三列指令是使用屬性的模形來連接數(shù)據(jù)模型和DOM元素的
- 模板式表單是只能在模板中通過本地變量賦值來操作DOM
- 響應式表單是只能在代碼中通過FormCtrol贸街、FormGroup、FormArray對象來操作DOM
- name結(jié)尾的指令使用的時候不需要屬性綁定的方括號茅姜，直接使用闪朱，值為屬性的名字（類似字符串的賦值）；
- 另外使用name結(jié)尾的指令只能使用在formGroup指令的覆蓋范圍之內(nèi)钻洒；
- formGroup和formControl指令不能互相嵌套奋姿；
實例1：
ng g component reactiveForm
在reactive-form.component.ts中
import { Component, OnInit } from '@angular/core';
import {FormArray, FormControl, FormGroup} from "@angular/forms";
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html',
styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {
formModel:FormGroup = new FormGroup({
username:new FormControl(),
dateRange:new FormGroup({
from:new FormControl(),
to:new FormControl(),
}),
emails: new FormArray([
new FormControl("a@a.com"),
new FormControl("b@b.com"),
]),
});
constructor() { }
ngOnInit() {
}
onSubmit(){
console.log(this.formModel.value)
}
addEmail(){
let email = this.formModel.get('emails') as FormArray;
email.push(new FormControl());
}
}
在reactive-form.component.html中
<form [formGroup]="formModel" (submit)="onSubmit()">
<input type="text" formControlName="username">
<div formGroupName="dateRange">
起始日期：<input type="date" formControlName="from">
截止日期：<input type="date" formControlName="to">
</div>
<div>
<ul formArrayName="emails">
<li *ngFor="let e of this.formModel.get('emails').controls;let i=index;">
<input type="text" [formControlName]="i">
</li>
</ul>
<button type="button" (click)="addEmail()">增加Email</button>
</div>
<div>
<button type="submit">保存</button>
</div>
</form>
實例2：
ng g component reactiveRegist
實現(xiàn)代碼：
在reactive-regist.component.html模板中
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>用戶名：<input type="text" formControlName="username"></div>
<div>手機號：<input type="text" formControlName="mobile"></div>
<div formGroupName="passwordsGroup">
<div>密碼：<input type="password" formControlName="password"></div>
<div>重復密碼：<input type="password" formControlName="pconfirm" ></div>
</div>
<button type="submit">提交</button>
</form>
在reactive-regist.component.ts?組件控制器中
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";
@Component({
selector: 'app-react-regist',
templateUrl: './react-regist.component.html',
styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
formModel:FormGroup;
constructor() {
this.formModel = new FormGroup({
username:new FormControl(),
mobile:new FormControl(),
passwordsGroup:new FormGroup({
password:new FormControl(),
pconfirm:new FormControl(),
})
});
}
onSubmit(){
console.log(this.formModel.value);
}
ngOnInit() {
}
}
FormBuilder用法
FormBuilder通過依賴注入可以精減代碼量，同時可以傳入?yún)?shù)實現(xiàn)檢驗素标；現(xiàn)在把上例的表單模型做重構(gòu)称诗；
...
export class ReactRegistComponent implements OnInit {
formModel:FormGroup;
constructor(fb:FormBuilder) {
this.formModel = fb.group({
username:[''],
mobile:[''],
passwordsGroup:fb.group({
password:[''],
pconfirm:[''],
})
});
}
onSubmit(){
console.log(this.formModel.value);
}
ngOnInit() {
}
}
