Angular学习笔记-响应式表单

响应式表单共两步

1.使用ts编写数据模型
2.使用指令将数据模型与HTML连接

编写数据模型，FormModule的3个类型

类名	解释
FromControl	基本单位，保存当前值，元素校验状态以及元素是否被修改
FromGroup	多个FromControl集合，可带表表单的一部分活整个表单，只要有一个FromControl对象无效，都会导致FormGroup无效，其构造函数是对象，固定子集，带有key值
FromArray	长度可增长的字段集合，其构造函数是数组，没有key值，只能通过index访问

HTML指令与数据模型绑定

类名	指令属性绑定[]	指令字符串
FormGroup	formGroup	formGroupName
FormControl	formControl	formControlName
FormArray		formArrayName

响应式与模板式表单的区别

1. 响应式表单的指令以form开头，模板式表单以ng开头。
2. 在模板式表单中指令可用本地变量引用，响应式不可引用
3. 模板式表单在模板中操作数据，响应式表单在ts中操作

DEMO

创建一个响应式表单，有"用户名、手机号、电子邮件、密码和确认密码"字段，其中，点击电子邮件字段可以增加多个

HTML

<form [formGroup]="formGroup" (submit)="onSubmit()">
	<div>username:<input formControlName="username" type="text"></div>
	<div>mobilephone:<input formControlName="mobilephone" type="text"></div>
	<div formArrayName="emails" >emails:
		<li *ngFor="let email of formGroup.get('emails').controls;let i = index">
			<input type="text" [fromCOntrolName]="i">
		<li>
		<button (click)="add()">add</button>
	</div>
	<div formGroupName="passwords">
		<div>password<.input formControlName="password" type="text"/></div>
		<div>confirm password<input formControlName="passwordConfirm" type="text"></div>
	</div>
	<button type="submit">submit</button>
</form>

ts:

improt { Component, OnInit } form '@angular/core';
import { FormGroup,FormControl,FormArray } from '@angular/forms';

@Component({
  selector: 'app-template-form2',
  templateUrl: './template-form2.component.html',
  styleUrls: ['./template-form2.component.css']
})
export class templateForm2Component implements Oninit{

private formGroup:FormGroup

constructor(){
	this.formGroup = new FormGroup({
	username:new FormControl('张三'),
	emails:new FormArray([
	new FormControl()
	]),
	mobilephone:new FormControl(),
	password:new FormGroup({
		password:new FormControl(),
		passwordConfirm:new FormControl()
}

add(){
 let addemail = this.formGroup.get('emails') as FormArray;
 //强制转换FormArray类型
 addemail.push(new FormControl());

onSubmit(){
	console.log(this.formGroup.value);
}
}

1.private formGroup = new FormGroup({})传入的参数类型是对象
2.private username = new FormControl ()传入的第一个参数是其初始值
3.private passwords = new FormArray ([])传入的参数类型是数组
4.formGroup.value 返回整个表单对象
5.在ts中的formArray增加formControl
6.指令绑定
属性绑定的方式，即带方括号[]，其等号右侧是表达式，[formControl] = “xXX”,xxx必须为ts明确声明的属性值，如private formGroup:FormGroup = new FormGroup()
在HTMl中[formControlName]=‘i’,formControlName要使用方括号是因为formArray没有key值，只能根据索引，所以使用属性绑定方式，绑定变量i

使用FormBuilder简化代码

FormModule	FormBuilder类
formGroup	fb.group({})
formControl	[]其中第一个元素为初始值，第二个为校验方法
formArray	fb.array([])

constructor(fb:FormBuilder){
this.formGroup = fb.group({
username:['张三']，
mobilephone:[''],
emails:fb.array([
	new FormControl()
]),
password:fb.group({
	password:[''],
	passwordConfirm:[]
})
{)
}