Angular 6响应式表单实现自动双向绑定的替代方案咨询

嘿，这个问题我之前也帮不少开发者解决过，Angular V6里响应式表单确实不能直接用[(ngModel)]了，但要实现类似的双向绑定效果——让表单输入自动同步到数据对象，其实有几个简洁的方案，不用写一堆重复的订阅代码：

1. 用valueChanges结合distinctUntilChanged优化订阅逻辑 #

响应式表单的FormGroup和FormControl都有valueChanges这个Observable，我们可以订阅它来同步表单值到数据对象，但直接订阅会导致每次输入字符都触发更新，太冗余。这时候用distinctUntilChanged操作符过滤掉重复的表单值，只在值真正变化时更新数据对象，就能减少不必要的执行。

举个例子，假设你有个userData数据对象和userForm表单组：

import { distinctUntilChanged } from 'rxjs/operators';
import { Subscription } from 'rxjs';

// 组件类里的代码
private formSub: Subscription;

ngOnInit() {
  // 初始化表单时先把数据同步进去
  this.userForm.patchValue(this.userData);

  // 订阅表单变化，同步回数据对象
  this.formSub = this.userForm.valueChanges
    .pipe(
      // 用JSON.stringify比较前后值，避免无意义的更新
      distinctUntilChanged((prevVal, currVal) => JSON.stringify(prevVal) === JSON.stringify(currVal))
    )
    .subscribe(formVal => {
      // 合并更新数据对象，保留原有属性
      Object.assign(this.userData, formVal);
    });
}

ngOnDestroy() {
  // 组件销毁时取消订阅，防止内存泄漏
  this.formSub?.unsubscribe();
}

如果是单个FormControl，还可以把比较逻辑简化，比如直接比较值本身，不用JSON.stringify。

2. 封装自定义双向绑定指令（推荐复用场景） #

如果你的项目里有多个表单都需要这种双向绑定，写个自定义指令是最省心的——把同步逻辑封装起来，模板里用起来和[(ngModel)]一样方便。

先创建一个指令：

import { Directive, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

@Directive({
  selector: '[formGroupBind]'
})
export class FormGroupBindDirective implements OnInit, OnDestroy {
  @Input('formGroupBind') dataObj: any;
  @Output('formGroupBindChange') dataObjChange = new EventEmitter<any>();
  private sub: Subscription;

  constructor(private formGroup: FormGroup) {}

  ngOnInit() {
    // 初始化：把数据对象的值同步到表单
    this.formGroup.patchValue(this.dataObj);

    // 订阅表单变化，同步回数据对象并触发变更事件
    this.sub = this.formGroup.valueChanges
      .pipe(
        distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
      )
      .subscribe(formVal => {
        Object.assign(this.dataObj, formVal);
        this.dataObjChange.emit(this.dataObj);
      });
  }

  ngOnDestroy() {
    this.sub?.unsubscribe();
  }
}

然后在模板里直接用双向绑定语法：

<form [formGroup]="userForm" [(formGroupBind)]="userData">
  <input formControlName="username" type="text" placeholder="用户名">
  <input formControlName="email" type="email" placeholder="邮箱">
</form>

这样不管多少个表单，只要用这个指令就能实现双向绑定，完全不用重复写订阅代码。

3. 单个控件用Getter/Setter关联表单值 #

如果只是少数几个表单控件，也可以给数据对象的属性写Getter和Setter，手动关联FormControl的值：

private _userData = { username: '', email: '' };

// 定义Getter和Setter
get userData() {
  return this._userData;
}
set userData(newVal) {
  this._userData = newVal;
  // 数据变化时同步到表单
  this.userForm.patchValue(newVal);
}

ngOnInit() {
  // 初始化表单
  this.userForm = new FormGroup({
    username: new FormControl(this.userData.username),
    email: new FormControl(this.userData.email)
  });

  // 订阅单个控件的变化，同步回数据对象
  this.userForm.get('username').valueChanges.subscribe(val => {
    this._userData.username = val;
  });
  this.userForm.get('email').valueChanges.subscribe(val => {
    this._userData.email = val;
  });
}

这个方法适合控件少的场景，控件多的话还是前两种方案更高效。

小提醒 #

• 如果你的数据对象比较复杂，用JSON.stringify做深比较可能有性能问题，可以换成更高效的深比较函数（比如自己实现一个，或者用lodash的isEqual）。
• 所有订阅都要记得在组件销毁时取消，避免内存泄漏，上面的例子里都处理了这一点。

内容的提问来源于stack exchange，提问作者Idan Abrashkin