Question

我使用带有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的三个输入，3个输入有一个关系A + B = C，每当其中一个输入发生变化时，如果另一个输入有值，它应检查相同的div，如果有，则计算第三个输入。

e.g。输入值M =＆gt; X =＆gt; A是2，然后用户在M =＆gt;中输入3 X =＆gt; B，则M =＆gt; X =＆gt; C自动设置为5

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

e.g。输入值M =＆gt; X =＆gt; A设置为5，则应将5设置为输入M =＆gt; Y =＆gt;甲

以jquery方式呈现它很容易，因为我可以对所有输入执行单个绑定，并且我可以知道哪个输入触发了更改事件，然后我可以从触发的输入中导航到DOM。

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

提前致谢！

Answer 1

你可以在每一个输入中定义 formControlName ，然后在它们中的任何一个变化时检查它们。你可以得到那样的formControl的值

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

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

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

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

  aChanged(element) {
  if(element.value)
  }

  bChanged(element) {
  if(element.value)
  }

然后检查元素是否有值

{{1}}

Angular 2 Reactive Forms以角度方式而不是jquery方式发出问题

1 个答案: