RxJS 在 Angular响应式表单中的使用

mafeifan

发布于 2019-03-04 17:19:10

5.1K0

发布于 2019-03-04 17:19:10

文章被收录于专栏：finleyMafinleyMa

响应式表单

FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。例子

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms';
import { concat, merge, zip, combineLatest, race } from 'rxjs/index';
import { filter, map, startWith,  } from 'rxjs/internal/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
      hobby: [''],
    });

    //  监听整个表单
    this.form.valueChanges
          .subscribe( res => console.log(res));
  }
}

HTML

<form [formGroup]="form">
    username: <input type="text" name="username" formControlName="username">
    hobby: 
      <select name="hobby">
        <option value="sleep">sleep</option>
        <option value="play">play</option>
      </select>    
</form>

完善验证，只有通过验证才输出内容 filter 是rxjs提供的运算符

    this.form.valueChanges
    .pipe(
      filter(() => this.form.valid)
    )
    .subscribe(res => console.log(res));

如果需要额外的逻辑，只需要在pipe添加相应的运算符。比如这里在结果里追加上次更新时间，字段名为lastTime

    this.form.valueChanges
    .pipe(
      filter(() => this.form.valid)，
      map(data => {
        data.lastTime = new Date();
        return data
     })
    )
    .subscribe(res => console.log(res));

另一种写法，监听各个元素

    // 如果要监听单个表单元素
    const username$ = this.form.get('username').pipe(startWith(this.form.get('username').value))
    const hobby$ = this.form.get('hobby').pipe(startWith(this.form.get('hobby').value))
    //  combineLatest，它会取得各个 observable 最后送出的值，再输出成一个值
    //  这个有个问题是只有合并的元素都产生值才会输出内容，所以在上面使用startWith赋初始化值
    combineLatest(username$, status$)
      .pipe(
        map(([username, status]) => ({username, status}))
      )
      .subscribe(res => console.log(res));

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.02.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html