表单处理
- 一般情况表单需要具有几个功能：
- 每一个输入字段都需要有独立的校验规则
- 如果用户输入不符合校验规则，就会在出错的输入块旁显示错误信息
- 彼此依赖的字段一起被校验（例如在注册时的密码和确认密码）
- HTML也可以提供一些校验规则但是为了提高用户体验和满足用户需求和真实世界中可能出现的需求场景（比如校验规则是某个地方的邮政编码），需要使用angular框架
- Angular表单处理API，两种处理表单的方式
- 模板式表单：表单的数据模型是通过模板中的相关指令来定义的，这种方式定义的数据模型受限于HTML语法，模 板驱动值适用于一些简单场景
- 响应式表单：通过编写ts代码来创建一个底层数模型，定义好模型以后，将模板上的HTML元素和底层数据模型连接在一起
- 不管是哪种表单，都有一个对应的数据模型来存储表单数据，数据模型并不是一个任意对象，它是由angular/forms模块中的一些特定的类组成的（如：FromControl，FormGroup，FormArray），在模板式表单中，不能直接访问到这些类
- 使用响应式表单需要引入FormsModule,ReactiveFormsModule
- 表单验证
模板式表单
- ngForm指令
- 在div标签中添加ngForm指令，效果和form标签效果一样
<div ngForm></div>
- 在form标签中添加ngNoForm，angular就不会接管这个表单
<form action="/regist" method="post" ngNoForm>
<div>用户名：<input type="text"></div>
<div>手机号：<input type="text"></div>
<div>密码：<input type="password"></div>
<div>确认密码：<input type="password"></div>
<button type="submit">注册</button>
</form>
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用户名：<input ngModel name="username" type="text"></div>
<button type="submit">注册</button>
</form>
<div>
{{myForm.value | json}}
</div>
- ngForm指令会拦截标准的HTML表单提交事件，然后会用一个自带的事件ngSubmit事件来代替它
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用户名：<input type="text"></div>
<div>手机号：<input type="text"></div>
<div>密码：<input type="password"></div>
<div>确认密码：<input type="password"></div>
<button type="submit">注册</button>
</form>
- ngModel指令
- 在angular的表单api中ngModel指令代表表单中的一个字段，这个指令会隐式的创建一个FormControl实例来代表字段的数据模型，并用这个FormControl类型的对象来存储字段的值
- 在标记了ngForm的HTML元素内使用ngModel指令时不需要使用[]和()
- ngModel也可以通过访问模板变量来获取字段的值
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用户名：<input #username="ngModel" ngModel name="username" type="text"></div>
<button type="submit">注册</button>
</form>
<div>{{username.value}}</div>
- ngModelGroup指令
- 和ngForm类似也会创建一个FormGroup实例，这个实例会在ngForm对象的value属性中表现为一个嵌套的对象，ngModelGroup的子属性会变成嵌套对象的子属性
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div ngModelGroup="userInfo">
<div>用户名：<input #username="ngModel" ngModel name="username" type="text"></div>
</div>
</form>
<div>
{{myForm.value | json}}
</div>
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用户名：<input #username="ngModel" 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>
响应式表单
- 创建数据模型
- FormControl：是构成表单的基本单位，通常情况下用来代表一个个input的元素（也可以用来代表更复杂的ui组件，比如日历，下拉选择框），保存并且关联HTML元素当前的值以及元素的校验状态和元素是否被修改过 等信息
username:FormControl=new FormControl("aaa");
- FormGroup：既可以代表报表单的一部分（表单字段的一个固定的子集）也可以代表整个表单，它是FormGroup的集合（比如设置起始日期和终止日期）
formModel:FormGroup =new FormGroup({
from:new FormControl(),
to:new FormControl()
})
- FormArray：和FormGroup类似，但是它有一个额外的长度属性，通常用来代表一个可以增长的字段集合（比如一个用户可能拥有多个邮件地址），FormArray中的FormControl是没有一个相关key的（上面FormGroup中的from和to），只能通过序号来访问FormArray中的元素
emails:FormArray=new FormArray([
new FormControl("a@a.com"),
new FormControl("b@b.com")
]);
- 响应式表单指令
- 这些指令用于绑定相应的类，前面的指令是通过属性绑定，后面带Name的指令是可以使用属性的名字来连接数据模型和DOM元素的
- 类名：
FormGroup，FormControl，FormArray
- 指令：
formGroup，formGroupName ，
formControl，formControlName，
formArrayName
- 响应式表单和模板是表单不同的是，不可以通过创建一个模板本地变量来引用指令的实例，目的是区分两种表单的处理方式
<form [formGroup]="formModel" (submit)="onSubmit()">
<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>
formModel:FormGroup =new FormGroup({
dateRange:new FormGroup({
from:new FormControl(),
to:new FormControl()
}),
emails: new FormArray([
new FormControl("a@a.com"),
new FormControl("b@b.com")
])
});
onSubmit(){
console.log(this.formModel.value);
}
addEmail(){
let emails=this.formModel.get("emails") as FormArray;
emails.push(new FormControl());
}
- 使用formControl指令，不能用在formGroup指令的内部，只能在外部单独和一个input绑定起来，要在表单内部使用就要用formControlName指令绑定
<input [formControl]="username">
username:FormControl=new FormControl("aaa");
响应式表单重构
<form [formGroup]="formModel" (submit)="onSubmit()">
<div>用户名：<input type="text" formControlName="username"></div>
<div>手机号：<input type="number" 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>
export class ReactiveRegistComponent 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);
}
}
- FormBuilder，是angular提供的一个工具，FormBuilder本身并没有提供新的功能，但是简化了定义表单数据结构的语法
- fb有三个方法，分别对应响应式表单的三个类，简化了代码的同时添加了更多的语法配置（比如在fb的group方法中可以添加第二个参数，可以用来校验这个FormGroup）
- fb还允许使用一个数组来实例化一个FormControl实例（就是这里的username和mobile），数组的第一个元素是FormControl的初始值，第二个元素是一个校验方法，第三个元素是一个异步的校验方法
constructor(fb:FormBuilder) {
this.formModel=fb.group({
username:[''],
mobile:[''],
passwordsGroup: fb.group({
password:[''],
pconfirm:[''],
})
});
}
