表单处理

模板式表单

表单数据模型是通过组件中的相关指令来定义的，因为使用这种方式来定义数据模型时，我们会受限于HTMl的语法，所以模板驱动方式的值适用于简单的场景

ngForm指令

ngForm代表整个表单，angular会把带有form标签的表单隐式的添加，接管表单的处理，隐式创建了一个formGroup类的实例，存储表单的数据模型
实例：

<form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)">
  <div>用户名<input ngModel name="username" type="text"></div>
  <div>手机号<input ngModel name="tel" type="text"></div>
  <div ngModelGroup="password">
    <div>密码<input ngModel name="password" type="password"></div>
    <div>确认密码<input ngModel name="pconfig" type="password"></div>
    <button type="submit"></button>
  </div>
</form>
<div>
{{myform.value | json}}
</div>
////浏览器控制台打印
Object {username: "ll", tel: "00", password: Object}
password
:
Object
tel
:
"00"
username
:
"ll"
__proto__
:
Object

响应式表单

需要引入ReactiveFormsModule
通过TS代码来创建底层的数据模型，在这个模型定义好之后，使用这些特定的指令，模板上的HTML元素与底层的数据模型链接在一起
创建响应式表单一共需要两步：
第一：

  myHero= new FormGroup({
    name: new FormControl()
  })

第二

<h2>Hero Detail</h2>
<h3><i>Just a FormControl</i></h3>
<form [formGroup]="myHero" novalidate>
  <label class="center-block">Name:
    <input class="form-control" formControlName="name">
  </label>
</form>
  {{myHero.value | json}}
  
  显示
  {name ：null}

FormBuilder

明确把heroForm属性的类型声明为FormGroup
把FormBuilder注入到构造函数中。
添加一个名叫createForm的新方法，它会用FormBuilder来定义heroForm。
在构造函数中调用createForm

export class HeroDetailComponent3 {
  heroForm: FormGroup; // <--- heroForm is of type FormGroup

  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }
  createForm() {
    this.heroForm = this.fb.group({
      name: '', // <--- the FormControl called "name"
    });
  }
}

name 属性可以为一个数组，第一个为参数为初始值，第二个为验证器 
name: ['', Validators.required ]
<p>Form status: {{ heroForm.status | json }}</p>

查看FormControl属性

属性	说明
myControl.value	FormControl的值。
myControl.status	FormControl的有效性。可能的值有VALID、INVALID、PENDING或DISABLED。
myControl.pristine	如果用户尚未改变过这个控件的值，则为true。它总是与myControl.dirty相反。
myControl.untouched	如果用户尚未进入这个HTML控件，也没有触发过它的blur（失去焦点）事件，则为true。它是myControl.touched的反义词。

可以使用.get()方法来提取表单中一个单独FormControl的状态。我们可以在组件类中这么做，或者通过往模板中添加下列代码来把它显示在页面中，就添加在{{form.value | json}}插值表达式的紧后面：

<p>Name value: {{ heroForm.get('name').value }}</p>

第一步：编码来创建数据模型

FormControl userName: FormControl = new FormControl('aaa');带的参数就是与之绑定表单组件的初始值
FormGroup 既可以代表表单的一部分，也可以代表整个表单，是多个Formcontrol集合

 formModel: FormGroup = new FormGroup({
    from: new FormControl(),
    to: new FormControl()
  })

FormArray 没有key，只能通过index访问

  eamils: FormArray = new FormArray([
    new FormControl('a@q.com'),
    new FormControl('b@b.com')
  ]);

无标题文章