表单处理
- 模板式表单
- 响应式表单
- 表单校验
模板式表单需要在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 - 它是一个为单个表单控件提供支持的类，可用于跟踪控件的值和验证状态，此外还提供了一系列公共API。
使用示例：
ngOnInit() {
this.myControl = new FormControl('Semlinker');
}
- FormGroup - 包含是一组 FormControl 实例，可用于跟踪 FormControl 组的值和验证状态，此外也提供了一系列公共API。
使用示例：
ngOnInit() {
this.myGroup = new FormGroup({
name: new FormControl('Semlinker'),
location: new FormControl('China, CN')
});
}
- FormArray - 包含是一组 FormControl 数组集合。
定义示例：
...
//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"),
]);
...
用到的相关绑定指令
图中第二列指令是属性绑定
第三列指令是使用属性的模形来连接数据模型和DOM元素的
- 模板式表单是只能在模板中通过本地变量赋值来操作DOM
- 响应式表单是只能在代码中通过FormCtrol、FormGroup、FormArray对象来操作DOM
- name结尾的指令使用的时候不需要属性绑定的方括号，直接使用，值为属性的名字（类似字符串的赋值）；
- 另外使用name结尾的指令只能使用在formGroup指令的覆盖范围之内；
- 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
实现代码：
在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通过依赖注入可以精减代码量，同时可以传入参数实现检验；现在把上例的表单模型做重构；
...
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() {
}
}
