angular4-03 forms

1、新建项目
ng new forms

Paste_Image.png

cd forms
cnpm install
ng serve --open

2、要使用angular的表单，需要在NgModule中引入FormsModule或者ReactiveFormsModule
FormsModule用于 ngModel和NgForm
ReactiveFormsModule用于 formControl和ngFormGroup
当使用了FormsModule,NgForm会自动附加到视图上的form表单上，NgForm会默认包含以下两点：
1)一个名为ngForm的 FormGroup

2. A (ngSubmit) Output

import {FormsModule,ReactiveFormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    FormsDemoApp,
    DemoFormSkuComponent,
    // ... our declarations here
  ],
  imports: [
    BrowserModule,
    FormsModule, // <-- add this
    ReactiveFormsModule // <-- and this
  ],
  bootstrap: [ FormsDemoApp ]
})
class FormsDemoAppModule {}

在.angular-cli.json文件中加入一个全局样式

"styles": [
        "assets/vendor/semantic.min.css",
        "styles.css"
      ],

3、因为有多个form表单的例子，这里加上angular的路由,同样在app.module.ts下增加路由

import {RouterModule,Routes} from '@angular/router';
//...
import { AppComponent } from './app.component';
import { IntroComponent } from './intro/intro.component';
import { DemoFormSkuComponent } from './demo-form-sku/demo-form-sku.component';

const routes:Routes=[
  {path:'',component:IntroComponent,pathMatch:'full'},
  {path:'sku',component:DemoFormSkuComponent,pathMatch:'full'}
];

@NgModule({
  declarations: [
    AppComponent,
    IntroComponent,
    DemoFormSkuComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接着改写根组件的html,加上路由的router-outlet,即app.component.html文件

  

    
      ![](/assets/images/ng-book-2-minibook.png)
    
    

      
Angular Forms
    
  


  

    
  

  

    
  

4、创建组件intro.component.ts和demo-form-sku.component.ts组件

ng g component intro
ng g component demo-form-sku

5、修改组件 demo-form-sku.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }
  onSubmit(form:any):void{
    console.log('you submitted value:',form);
  }
}

demo-form-sku.component.html

  
Demo Form:Sku
  
  

    

      SKU
      
      
    
    Submit
  

6、Using FormBuilder ng g component component demo-form-sku-with-builder

import { Component, OnInit } from '@angular/core';
import {FormBuilder,FormGroup} from '@angular/forms';
@Component({
  selector: 'app-demo-form-sku-with-builder',
  templateUrl: './demo-form-sku-with-builder.component.html',
  styleUrls: ['./demo-form-sku-with-builder.component.css']
})
export class DemoFormSkuWithBuilderComponent implements OnInit {
  myForm:FormGroup;
  constructor(fb:FormBuilder) {
    this.myForm=fb.group({
      'sku':['ABC123']
    })
   }

  ngOnInit() {
  }
  onSubmit(value:string):void{
    console.log('you submitted value:'+value);
  }
}

demo-form-sku-with-builder.component.html

  
Demo Form:Sku with Builder
  

    

      SKU
      
    
    Submit
  

备注：表单中使用了 [formGroup],如

之后，则不再会自动产生名为ngForm的FormGroup
也就是用FormBuilder时，表单中使用formGroup，就不会有默认的ngForm了

当要显示的产生 FormGroup和FormControl时 使用 ngForm和ngModel
当要把已经存在的FormGroup （如FormBuilder生成的）绑定到View使用 formGroup和formControl

7、表单验证
要使用angular的validator
首先要在FormControl上设置验证规则
其次检测视图上FormControl设置的验证器状态，对各状态作相应的响应处理
(To use validators we need to do two things:

1. Assign a validator to the FormControl object
2. Check the status of the validator in the view and take action accordingly)
   添加组件ng g component demo-form-with-validations-explicit

import { Component } from '@angular/core';
import {FormBuilder,FormGroup,Validators,AbstractControl} from '@angular/forms';

@Component({
  selector: 'app-demo-form-with-validations-explicit',
  templateUrl: './demo-form-with-validations-explicit.component.html'
})
export class DemoFormWithValidationsExplicitComponent {
  myForm:FormGroup;
  sku:AbstractControl;
  constructor(fb:FormBuilder) { 
    this.myForm=fb.group({
      'sku':['',Validators.required]
    });
    this.sku=this.myForm.controls['sku'];
  }
  onSubmit(value: any): void {
    console.log('you submitted value: ', value);
  }
}

demo-form-with-validations-explicit.component.html

  
Demo Form:with validations (explicit)
  
    

      SKU
      
      
SKU is invalid
      
SKU is required
    
    
Form is invalid

    Submit
  

8、自定义验证
以 sku需以123开头为例，参考 validators.required的定义：

export class Validators {
    static required(c: FormControl): StringMap {
    return isBlank(c.value) || c.value == "" ? {"required": true} : null;
}

function skuValidator(control: FormControl): { [s: string]: boolean } {
    if (!control.value.match(/^123/)) {
        return {invalidSku: true};
    }
}

demo-form-with-custom-validation.component.ts

import { Component } from '@angular/core';
import {FormBuilder,FormGroup,Validators,AbstractControl,FormControl} from '@angular/forms';

function skuValidator(control:FormControl):{[s:string]:boolean}{
  if(!control.value.match(/^123/)){  //验证是否以123开头
    return {invalidSku:true};
  }
}
@Component({
  selector: 'app-demo-form-with-custom-validation',
  templateUrl: './demo-form-with-custom-validation.component.html'
})
export class DemoFormWithCustomValidationComponent {
  myForm:FormGroup;
  sku:AbstractControl;
  constructor(fb:FormBuilder) { 
    this.myForm=fb.group({
      'sku':['',Validators.compose([Validators.required,skuValidator])]
    })
    this.sku=this.myForm.controls['sku'];
  }

  onSubmit(value:string):void{
    console.log('you submitted value:',value);
  }
}

demo-form-with-custom-validation.component.html

  
Demo Form:with validations (explicit)
  

    

      SKU
      
      
SKU is invalid
      
SKU is required
      
SKU格式不正确,以123开头
    
    
Form is invalid

    Submit
  

9、跟踪数据变化 demo-form-with-events.component.ts

import { Component } from '@angular/core';
import {FormBuilder,FormGroup,Validators,AbstractControl} from '@angular/forms';

@Component({
  selector: 'app-demo-form-with-events',
  templateUrl: './demo-form-with-events.component.html'
})
export class DemoFormWithEventsComponent {
  myForm:FormGroup;
  sku:AbstractControl;
  constructor(fb:FormBuilder) { 
    this.myForm=fb.group({
      'sku':['',Validators.required]
    });
    this.sku=this.myForm.controls['sku'];
    this.sku.valueChanges.subscribe((value:string)=>{
      console.log('sku changed to:',value);
    });
    this.myForm.valueChanges.subscribe((form:any)=>{
      console.log('form changed to:',form);
    });
  }
  onSubmit(form: any): void {
    console.log('you submitted value:', form.sku);
  }
}