Angular 2 Reactive Forms 问题如何以角度方式而不是 jquery 方式进行

Posted 2023-03-13

【中文标题】Angular 2 Reactive Forms 问题如何以角度方式而不是 jquery 方式进行

【英文标题】：Angular 2 Reactive Forms issue how to do in angular way not jquery way

【发布时间】：2018-09-28 19:41:09

【问题描述】：

我使用带有 Typescript 的 Angular 2 Reactive Forms。 我有一个这样的模板：

<form [formGroup]="form">
    <div class="M">
        <div class="X">
            <!-- I dont want to put (change)="onChanged()" on every inputs-->
            <input class="A" formControlName="MXA" /> 
            <input class="B"  formControlName="MXB" />
            <input class="C" formControlName="MXC" />
        </div>
        <div class="Y">
            <input class="A" formControlName="MYA" />
            <input class="B" formControlName="MYB" />
            <input class="C" formControlName="MYC" />
        </div>
    </div>
    <div class="N">
        <div class="X">
            <input class="A" formControlName="NXA" />
            <input class="B" formControlName="NXB" />
            <input class="C" formControlName="NXC" />
        </div>
        <div class="Y">
            <input class="A" formControlName="NYA" />
            <input class="B" formControlName="NYB" />
            <input class="C" formControlName="NYC" />
        </div>
    </div>
</form>

和组件类：

export class MyCompoenent 

  public form: FormGroup;

  onInit() 
    this.form = new FormGroup(
      MXA: new FormControl(),
      MXB: new FormControl(),
      MXC: new FormControl(),
      MYA: new FormControl(),
      MYB: new FormControl(),
      MYC: new FormControl(),
      NXA: new FormControl(),
      NXB: new FormControl(),
      NXC: new FormControl(),
      NYA: new FormControl(),
      NYB: new FormControl(),
      NYC: new FormControl(),
    );

    this.form.valueChanges.subscribe((p) => 
      /* I dont't know which input has been changed here */
    );
    this.form.get('MXA').valueChanges.subscribe((p) => 
      /* I dont't want to subscribe to every individual input like this, its not good solution when there is too many inputs */
    );

  

我想要的是：

1.三个输入有四个div，三个输入的关系是A+B=C，每当其中一个输入发生变化时，都要检查同一个div是否有另一个输入有值，如果有，则计算第三个输入。

例如输入M => X => A的值为2，则用户在M => X => B中输入3，则M => X => C自动设置为5

2。如果输入发生变化，它应该更新在 SAME 祖父 div 中具有相同类的另一个输入。

例如输入 M => X => A 的值设置为 5，则应将输入 M => Y => A 设置为 5

以 jquery 方式思考很容易，因为我可以对所有输入进行一次绑定，并且我可以知道哪个输入触发了更改事件，然后我可以从触发的输入在 DOM 中导航。

但我想知道如何以 Angular 的方式正确地做到这一点。 this.form.valueChanges() 不显示哪个输入已更改，并且我不喜欢单独订阅每个输入，不喜欢在角度模板的每个输入中放置一些绑定，因为如果输入太多，我需要做很多工作，并且不想使用 getElementsByClassName 之类的“jquery 方式”，有什么想法吗？

提前致谢！

【参考方案1】：

您可以在每个输入中定义 formControlName，然后在其中任何一个更改时检查它们。formControl 的值您可能会得到这样的结果

this.form.get("formControleName");

或者你可以定义 formControle 然后订阅它

filterName = new FormControl(null);
constructor()
  this.filterName.valueChanges.subscribe(value => 
    if (value) 
  

还有其他选择，但我不会推荐。

  <input #inputAX (change)="aChanged(inputBX)"/> 
  <input #inputBX (change)="bChanged(inputAX)"/>

然后检查元素是否有值

  aChanged(element) 
  if(element.value)
  

  bChanged(element) 
  if(element.value)
  

【讨论】：

是的，我在每个输入中都有 formControlName，您如何订阅值更改以及如何知道哪个输入发生更改？