本文實(shí)例講述了Angular4表單響應(yīng)功能。分享給大家供大家參考，具體如下：

響應(yīng)式表單

1、響應(yīng)式表單需要在appmodule文件中注入響應(yīng)式表單模塊

import { FormsModule, ReactiveFormsModule } from '@angular/forms'；<!--  這里引用模塊的時(shí)候要注意，具體是哪個(gè)module文件使用了表單，  因?yàn)樵谀承┣闆r下表單是被appmodule下的某個(gè)子module文件使用，  那么就要在該子module文件中引入響應(yīng)式表單模塊。-->@NgModule(  {imports: [FormsModule, ReactiveFormsModule……]  ……}

2、form.component.ts組件當(dāng)中引用

第一種方式:

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文件中綁定時(shí)使用*/ constructor() {  this.formModel= new FormGroup({    formControl1: new FormControl(),    formControl2: new FormControl(),    ……  }); } onSubmit () {  console.log(this.formModel.value); }}

3、對(duì)應(yīng)的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>

至此，一份簡(jiǎn)單的響應(yīng)式表單就完成了

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。