Angular4学习笔记之表单

Angular4我自己还在摸索学习中，这个系列中的笔记会不定期修改和更新……

一、响应式表单

1、响应式表单需要在appmodule文件中注入响应式表单模块

import { FormsModule, ReactiveFormsModule } from '@angular/forms'；<!--     这里引用模块的时候要注意，具体是哪个module文件使用了表单，    因为在某些情况下表单是被appmodule下的某个子module文件使用，    那么就要在该子module文件中引入响应式表单模块。-->@NgModule(    {imports: [FormsModule, ReactiveFormsModule……]    ……}

2、form.component.ts组件当中引用

第一种方式:

import { Component } from '@angular/core';import { FormGroup, FormControl, FormBuilder} from '@angular/forms';@Component({  templateUrl: 'forms.component.html'})export class FormsComponent {  formModel: FormGroup;  constructor(fb: FormBuilder) {    this.formModel= fb.group({      formControl1: [''],      formControl2: [''],      ……    });  }  onSubmit () {    console.log(this.formModel.value);  }}

第二种方式:

import { Component } from '@angular/core';import { FormGroup, FormControl} from '@angular/forms';@Component({  templateUrl: 'forms.component.html'})export class FormsComponent {  formModel: FormGroup;  /*这里定义表单变量名，HTML文件中绑定时使用*/  constructor() {    this.formModel= new FormGroup({        formControl1: new FormControl(),        formControl2: new FormControl(),        ……    });  }  onSubmit () {    console.log(this.formModel.value);  }}

3、对应的HTML文件

<form action="" method="post" [formGroup]='formModel'> <!-- 通过指令绑定ts文件中命名的变量名 --!>   <div class="form-group row">     <div class="col-md-6">       <div class="row">         <label>formControl1</label>         <input type="text" formControlName='formControl1'>       </div>     </div>     <div class="col-md-6">       <div class="row">          <label>formControl2</label>       <input type="text" formControlName='formControl2'>       </div>     </div>   </div> </form>

4、一份简单的响应式表单就完成了