Angular权威教程之表单篇

重中之重，重重重的表单来了！

既然这么重要的表单，angular自然也是有很完善的解决方案。

• 表单控件(FormControl)
• 验证器(validator)
• 观察者(observer)

FormControl and FormGroup

被称为最基础的两个表单对象

FormControl

代表单一的输入字段，表单中的最小单元。

封装了这些字段的值和状态，比如是否有效，是否脏或是否有错误等。

脏数据：
脏数据（DirtyRead）是指源系统中的数据不在给定的范围内或对于实际业务毫无意义，或是数据格式非法，以及在源系统中存在不规范的编码和含糊的业务逻辑。

//新建一个FormControl并将Nate传入，此时nameControl中已经带有Nate
let nameControl = new FormControl("Nate"); 
 
let name = nameControl.value; // 运用.value，此时name应为Nate
 
// 现在我们可以用方法调用此时对象的状态
nameControl.errors // -> StringMap<string, any> of errors 
nameControl.dirty  // -> false 
nameControl.valid  // -> true

根据颜色与之前的描述进行对应即可：

FormGroup

管理多个FormControl，提供总包接口(wrapper interface)

let personInfo = new FormGroup({     
firstName: new FormControl("Nate"),     
lastName: new FormControl("Murray"),     
zip: new FormControl("90210") 
})

FormGroup和FormControl都是继承自AbstractControl，所以调用的方法都是一致的，只是group是control的一个集合而已。

personInfo.value; // -> { 
//   firstName: "Nate", 
//   lastName: "Murray", 
//   zip: "90210" 
// } 
 
// now we can query this control group for certain values, which have sensible 
// values depending on the children FormControl's values: 
personInfo.errors // -> StringMap<string, any> of errors 
personInfo.dirty  // -> false 
personInfo.valid  // -> true // etc.

两种使用表单的方式

import {   FormsModule,   ReactiveFormsModule } from '@angular/forms'; 
 
// farther down... 

@NgModule({   
declarations: [     
FormsDemoApp,     
DemoFormSku,     
// ... our declarations here   ],   
imports: [     
BrowserModule,     
FormsModule,         // <-- add this     
ReactiveFormsModule  // <-- and this   
],   
bootstrap: [ FormsDemoApp ] 
}) 
class FormsDemoAppModule {} 

使用FormsModule

• ngModel
• NgForm

使用ReactiveFormsModule

• formControl
• ngFormGroup

制作一个简易的表单

form 和NgForm

当我们导入FormsModule的时候，NgForm就会被自动附加到视图中所有的标签上。
提供了两个重要的功能：
一个名叫ngForm的FormGroup对象(即FormControl的集合)
一个输出事件ngSubmit

  <form #f="ngForm"           (ngSubmit)="onSubmit(f.value)" >

#f=“ngForm” 这是一个创建局部变量的方法，格式为#xxx=something，此处的ngForm是由NgForm中导出 的

意义解读：当提交表单时，启动onSubmit方法，并且将ngForm中的value作为值传入

   <div class="field">         
   <label for="skuInput">SKU</label>         
   <input type="text"   id="skuInput"   placeholder="SKU"  name="sku" ngModel>       
   </div> 

这里指定了一个不带属性的ngModel 当使用不带属性的ngModel时

import { Component } from '@angular/core'; 
 
@Component({   
selector: 'demo-form-sku', 
template: `   
<div class="ui raised segment">     
<h2 class="ui header">Demo Form: Sku</h2>     
<form #f="ngForm"      (ngSubmit)="onSubmit(f.value)"      class="ui form"> 
 
<div class="field">         
<label for="skuInput">SKU</label>        
<input type="text"      id="skuInput"       placeholder="SKU"       name="sku" ngModel>       
</div> 
<button type="submit" class="ui button">Submit</button>     </form>   </div>   ` })
export class DemoFormSku {   
onSubmit(form: any): void {    
console.log('you submitted value:', form);   
} } 

FormBuilder

import { Component } from '@angular/core'; 
import {   FormBuilder,   FormGroup } from '@angular/forms'; 
 
@Component({   selector: 'demo-form-sku-builder', 


export class DemoFormSkuBuilder {   myForm: FormGroup; 
 
  constructor(fb: FormBuilder) {     this.myForm = fb.group({       'sku': ['ABC123']     });   } 
 
  onSubmit(value: string): void {     console.log('you submitted value: ', value);   } } 

模板驱动式表单：

即上面需要引入FormModule的表单方式

响应式表单：

引入ReactiveFormsModule