时间戳

首页 > 解决方案 > 如何使用复选框将两个表单控件绑定在一起（和取消绑定）

javascript - 如何使用复选框将两个表单控件绑定在一起（和取消绑定）

问题描述

我有一个包含多个字段的表单组。我也有一个复选框。选中复选框后，我希望其中一个输入字段从另一个输入字段中获取值。如果未选中该复选框，我想让该字段独立。

我尝试使用复选框表单控件的布尔值将一个输入字段的值分配给另一个（正方形的边=矩形的边，如果矩形是正方形）但是 Angular 抛出了一条错误消息说“递归过多”。

在组件.ts

ngOnInit() {
    this.formMain = this.fb.group({
      sideSquare: this.addSq.side,
      lenRect: this.addRect.len,
      widRect: this.addRect.wid,
      isSquare: true,      
    });
    this.onChanges();
  }
onChanges(): void {
    this.formMain.valueChanges.subscribe(val => this.updateValues());
  }

updateValues(): void {
    this.formMain.get('lenRect').setvalue(
      this.formMain.get('isSquare').value ?
      this.formMain.get('sideSquare').value : 0 );

    this.formMain.get('widRect').setvalue(
      this.formMain.get('isSquare').value ?
      this.formMain.get('sideSquare').value : 0 );

}

在 component.html 中

<form [formGroup]="formMain">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Square vs Rectangle</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field>
        <input matInput placeholder="Square side" type="number" formControlName="sideSquare">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Rectangle length" type="number" formControlName="lenRect">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Rectangle length" type="number" formControlName="widRect">
      </mat-form-field>
      <mat-checkbox formControlName="isSquare">Rectangle is a square</mat-checkbox>
    </mat-card-content>
  </mat-card>
</form>

此问题类似于送货地址与帐单地址相同的表单（但更简单）。我发现了关于地址问题的另一个问题，但建议的答案对我不起作用。

有没有办法做到这一点？谢谢你的帮助！

标签： javascriptangularform-control

解决方案

把事情简单化 ：

堆栈闪电战

form = new FormGroup({
  'f1': new FormControl(''),
  'f2': new FormControl(''),
  'propagate': new FormControl(false),
});

ngOnInit() {
  this.form.valueChanges.pipe(
    filter(formValue => formValue.propagate),
    map(formValue => formValue.f1),
  ).subscribe(f1 => this.form.get('f2').setValue(f1, { emitEvent: false }));
}

在本例中，F1 为主控制，F2 为从控制。

你听表单值的变化：如果复选框被选中，那么你做一些事情，否则你不做。

然后将表单的值映射到 F1 的值。

最后，根据F1设置F2的值，不发出事件（防止死循环）

推荐阅读