本文實例講述了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>
至此，一份簡單的響應式表單就完成了
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
