在 Angular Reactive Forms (Clean Code) 中跟踪多个控制表单以进行单独处理答案

【问题标题】：Tracking multiple control forms for individual processing in Angular Reactive Forms (Clean Code)在 Angular Reactive Forms (Clean Code) 中跟踪多个控制表单以进行单独处理
【发布时间】：2022-08-14 22:06:20
【问题描述】：

我正在使用 Angular 11.0.2。我有一个包含 20 个字段的表单组，这些字段显示在两个表中。其中一些表单控件在两个表单之间共享。

其中约 9 个 formControls 是我想观察的文本输入字段。当一个值发生变化时，我想触发一个事件。但是，棘手的部分是我想单独处理 3 个字段（每个字段都以不同的方式）。因此订阅整个表单组并不会削减它。对于剩下的 6 个字段，我还需要知道它们的字段名称，以便进一步处理。

我的想法是：

分别订阅每个 formControl 并为每个 formControl 创建一个更新方法。然而，这将导致丰富的领域和方法。我的 TS 课程中的示例：

ngOnInit(): void {
    this.direction$ = this.weatherForm.get(\'direction\').valueChanges.subscribe(() => this.updateDirectionChange());
    this.speed$ = this.weatherForm.get(\'speed\').valueChanges.subscribe(() => this.updateSpeedChange());
}

在每个表单控件输入字段上使用(change) 事件，传递字段名称，并在带有控制流的 TS 调用中处理它。这似乎使模板的逻辑变得不必要地复杂。我的模板中的示例：

<tr class=\'table-row\'>
    <td
      class=\'table-cell caption grayscale secondary-text\'>Direction</td>
    <td class=\'table-cell\'>
      <input-field>
        <input input class=\'weather-input-field\' formControlName=\'direction\' (change)=\'handleFieldChange(\"direction\")\'/>
      </input-field>
    </td>
  </tr>
  <tr class=\'table-row\'>
    <td
      class=\'table-cell caption grayscale secondary-text\'>Speed</td>
    <td class=\'table-cell\'>
      <input input class=\'weather-input-field\' formControlName=\'speed\' (change)=\'handleFieldChange(\"speed\")\'/>
    </td>
 </tr>

但是，从我的角度来看，这些方法似乎都不是有效的或“干净的代码”。有没有更好的处理方法？如果没有，您首选的解决方案是什么？

先感谢您。

标签： angular angular-reactive-forms angular-observable angular-event-emitter

【解决方案1】：

我喜欢用一些喜欢

 const inputs=["one","four"]
 const $obs=merge(...inputs.map((input:string)=>
     this.form.get(input).valueChanges.pipe(
       map((res:any)=>({id:input,value:res})
       ))
  ))

$obs 以方式返回一个对象，例如{id:"one":value:"what-ever"}

但我觉得有一种更好的方法是在表单中使用 ngModel 来更改两个表单控件的值。这样你就可以

<input [ngModel]="form1.get('one').value">
       (ngModelChange)="form1.get('one').setValue($event);
                        form2.get('one').setValue($event);
       [ngModelOptions]="{standalone:true}"/>

查看输入如何获取formControl“一”的值，更改时，更改form1的formControl“一”和form2的formControl“一”的值

【讨论】：