RxJS 5 – 如何订阅 Angular 的 FormControl

RxJS 5 是一个基于可观察序列的 JavaScript 库，它使用类似于数组的操作符来处理异步和基于事件的程序。在 Angular 中，RxJS 5 可以用来处理表单操作，其中表单控件是 FormControl，它表示单个表单控件的值和验证状态。在本文中，我们将学习如何使用 RxJS 5 订阅 Angular 的 FormControl。

如何创建一个 FormControl

首先，让我们看看如何创建一个 FormControl。您可以使用以下代码在组件中创建一个 FormControl。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `{{formControl.value}}`
})
export class MyComponent {
  formControl = new FormControl();
}

上面的代码会创建一个空的 FormControl，并在组件的模板中显示 FormControl 的值。

如何订阅 FormControl

现在，让我们看看如何使用 RxJS 5 订阅 FormControl。您可以使用 FormControl 的 valueChanges 属性来订阅 FormControl。valueChanges 是一个 Observable，它在 FormControl 的值（value）更改时发出新值。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';

@Component({
  selector: 'my-component',
  template: `{{currentValue}}`
})
export class MyComponent {
  formControl = new FormControl();
  currentValue: string;

  constructor() {
    this.formControl.valueChanges
      .startWith('')
      .subscribe(value => this.currentValue = value);
  }
}

在上面的代码中，我们使用 subscribe() 方法订阅了 FormControl 的 valueChanges 属性，并将当前的值存储在 currentValue 中。我们还使用 startWith() 操作符来在组件初始化时发出一个空值。

如何在一系列 FormControl 上订阅

如果您有一个表单，其中包含多个 FormControl，则可以使用 combineLatest() 操作符来订阅它们的值。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/combineLatest';

@Component({
  selector: 'my-component',
  template: `
  <form [formGroup]="form">
    <input formControlName="firstName">
    <input formControlName="lastName">
    <p>{{fullName}}</p>
  </form>`
})
export class MyComponent {
  form = new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl(),
  });

  fullName: string;

  constructor() {
    Observable.combineLatest(
      this.form.get('firstName').valueChanges,
      this.form.get('lastName').valueChanges
    ).subscribe(([firstName, lastName]) => {
      this.fullName = `${firstName} ${lastName}`;
    });
  }
}

在上面的代码中，我们使用 FormGroup 和 FormControl 来创建表单。我们定义了一个名为 fullName 的属性，它将 firstName 和 lastName 合并为一个字符串，并在组件中显示它们。使用 combineLatest() 操作符，我们可以订阅多个 FormControl，并在它们的值更改时更新 fullName 属性。

总结

在本文中，我们学习了如何使用 RxJS 5 订阅 Angular 的 FormControl。我们使用 valueChanges 属性订阅了单个的 FormControl，并使用 combineLatest() 操作符来订阅一组 FormControl。RxJS 5 为我们提供了一个强大的工具，可以帮助我们更有效地处理表单操作和异步编程。

以上就是本篇文章的全部内容和示例代码，相信对于前端开发者来说会有所帮助，希望大家能够真正了解 RxJS 5 的特性和应用方法，并在实际开发中充分发挥它的作用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653fe1577d4982a6eb9726a4