一、使用響應(yīng)式表單

Angular 的響應(yīng)式表單能讓實(shí)現(xiàn)響應(yīng)式編程風(fēng)格更容易，這種編程風(fēng)格更傾向于在非 UI 的數(shù)據(jù)模型（通常接收自服務(wù)器）之間顯式的管理數(shù)據(jù)流， 并且用一個(gè) UI 導(dǎo)向的表單模型來保存屏幕上 HTML 控件的狀態(tài)和值。 響應(yīng)式表單可以讓使用響應(yīng)式編程模式、測(cè)試和校驗(yàn)變得更容易。

響應(yīng)式表單.png

二、代碼示例

//新建react-form組件
ng g component reactive-form

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';


@NgModule({
  declarations: [
    AppComponent,
    ReactiveFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html
<app-reactive-form></app-reactive-form>

//react-form.component.html
<form [formGroup]="formModel" (submit)="onSubmit()">
  <div formArrayName="dateRange">
    起始日期:<input formControlName="form" type="date">
    截止日期:<input formControlName="to" type="date">
  </div>
  <div>
    <ul formArrayName="emails">
      <li *ngFor="let e of formModel.get('emails').controls;let i = index;">
        <input type="text" [formControlName]="i">
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加Email</button>
    <button type="submit">保存</button>
  </div>
</form>

//react-form.component.ts
import {Component, OnInit} from '@angular/core';
import {FormArray, FormControl, FormGroup} from '@angular/forms';

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

  //FormControl 構(gòu)造函數(shù)接收一個(gè)參數(shù)，這里是aaa，這個(gè)參數(shù)用來指定FormControl的初始值，當(dāng)此FormControl與頁面中input關(guān)聯(lián)時(shí)，input的初始值為aaa
  username: FormControl = new FormControl('aaa');

  formModel: FormGroup = new FormGroup({
    dateRange: new FormGroup({
      form: new FormControl(),
      to: new FormControl()
    }),
    emails: new FormArray([
      new FormControl('@we'),
      new FormControl('@234234')
    ])
  });


  constructor() {
  }

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.formModel.value);
  }

  addEmail() {
    let emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());

  }

}

運(yùn)行結(jié)果1.png

制作一個(gè)響應(yīng)式的注冊(cè)表單

//新建響應(yīng)式的表單注冊(cè)組件
ng g component react-regist

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { Form1Component } from './form1/form1.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HeroFormComponent } from './hero-form/hero-form.component';
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
import { ReactRegistComponent } from './react-regist/react-regist.component';


@NgModule({
  declarations: [
    AppComponent,
    ReactRegistComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html
<app-react-regist></app-react-regist>

//react-regist.component.html
<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>電話：<input formControlName="mobile" type="text" name="mobile"/></div>
  <div>用戶名:<input formControlName="username" type="text" name="username"/></div>
  <div formGroupName="passwordsGroup">
    <div>密碼：<input formControlName="password" type="password" name="password"/></div>
    <div>確認(rèn)密碼:<input formControlName="confirmPass" type="password" name="confirmPass"/></div>
  </div>
  <div>
    <button type="submit">提交</button>
  </div>
</form>

//react-regist.component.ts
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-react-regist',
  templateUrl: './react-regist.component.html',
  styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
  formModel: FormGroup;

  constructor() {
   this.formModel = new FormGroup({
      mobile: new FormControl('18249666846'),
      username: new FormControl('xiaoming'),
      passwordsGroup: new FormGroup({
        password: new FormControl(),
        confirmPass: new FormControl()
      })
    });
  }

  ngOnInit() {}

  onSubmit() {
    console.log(this.formModel.value);
  }
}

//使用FormBuilder重構(gòu)上面的react-regist.component.ts
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-react-regist',
  templateUrl: './react-regist.component.html',
  styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
  formModel: FormGroup;

  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      mobile: ['18249666846'],
      username: ['xiaoming'],
      passwordsGroup: fb.group({
        password: [''],
        confirmPass: ['']
      })
    });
  }

  ngOnInit() {}

  onSubmit() {
    console.log(this.formModel.value);
  }
}