表单（FormControl、FormGroup）

FormControl是表单中的最小单元。

 

let nameControl = new FormControl("Nate");
let name = nameControl.value; // -> Nate
nameControl.dirty; //->false
nameControl.valid;//->true

<input type="text" [formControl]="name">

　　

FormGroup：一堆FormControl的集合。

let persionInfo = new FormGroup({
    firstName: new FormControl("Nate"),
    lastName: new FormControl("Murry"),
    zip: new FormControl("000996")
});

persionInfo.value; //{firstName:"Nate",...}

　　

第一个简单的表单：

　　在app.module.ts中加载表单模块FormsModule（这个模块提供ngModel、NgForm模块驱动指令）、ReactiveFormsModule（formControl、ngFormGroup模块驱动指令）

　　

　　创建相应表单组件Component

　　

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-form-control-demo',
  templateUrl: './form-control-demo.component.html',
  styleUrls: ['./form-control-demo.component.css']
})
export class FormControlDemoComponent implements OnInit {

  constructor() {

  }

  ngOnInit() {
  }

  onSubmit(form: any): boolean {
    console.log('you submitted value:', form);
    return false;
  }
}

　　

　　简单SKU表单html模板

　　

<div class="ui raised segment">
  <h2 class="ui header">Demo Form: Sku</h2>
  <form #f="ngForm" class="ui form" (ngSubmit)="onSubmit(f.value)">
    <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>

　　

1、form和NgForm

　　导入了FormsModule，可以在视图中使用NgForm了。

　　1.1 NgForm

　　　　NgForm它的选择器包含form标签，而不用显示添加ngForm属性，因此我们导入FormsModule时，NgForm会被自动添加到html上的所有<form>标签上

　　　　NgForm提供了一个名叫ngForm的FormGroup对象

　　　　一个输出事件ngSubmit

　　因此我们使用了 #f=‘ngForm’，将ngForm赋值到局部变量f上

　　(ngSubmit)="onSubmit(f.value)"  (ngSubmit)是数据输出，从NgForm输出到上层组件app-form-control-demo的onSubmit方法中，本例中就是输出f.value。

 

运行结果：

　　

ngModel:

　　NgModel组件制定的selector是ngModel，会创建一个formControl对象，自动添加到父级FormGroup表单对象上，并把这个formGroup绑定到DOM上，通过input的name属性值来在input标签和formGroup之间创建关联；

　　即   $("input[name='sku']")   < ----通过ngModel关联-------->    formControl

　　如果ngModel=“aaa"，那么就会默认给这个ipnut填入aaa的值。

　　如果ngModel不填就是默认空值

　　给input添加ngModel属性后，input就能把值传给表单对象了，然后submit按钮触发后就能在console.log中输出值。

 如果是[(ngModel)]="sku"，就算意味着双向绑定，把sku属性赋值给ngModel属性，同时ngModel的值也会输出给sku属性，如果用console.log('sku', sku)测试就会发现，点击提交按钮后就能输出sku的值，如果把()去掉就会输出undefined；

如果把[]去掉也是输出undefined，除非sku有默认值。