14.《Angular响应式表单》

一、使用响应式表单

Angular 的响应式表单能让实现响应式编程风格更容易，这种编程风格更倾向于在非 UI 的数据模型（通常接收自服务器）之间显式的管理数据流， 并且用一个 UI 导向的表单模型来保存屏幕上 HTML 控件的状态和值。 响应式表单可以让使用响应式编程模式、测试和校验变得更容易。

响应式表单.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 构造函数接收一个参数，这里是aaa，这个参数用来指定FormControl的初始值，当此FormControl与页面中input关联时，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());

  }

}

运行结果1.png

制作一个响应式的注册表单

//新建响应式的表单注册组件
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>确认密码:<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重构上面的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);
  }
}