typescript - Problema con Formularios Reactivos en Angular 2: cómo hacerlo de manera angular, no de manera jquery

Uso Angular 2 Reactive Forms con Typescript. Tengo una plantilla así:

<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>

y la clase del componente:

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 */
    });

  }

}

Lo que quiero es:

1. Hay cuatro div con tres entradas, las 3 entradas tienen una relación A+B=C, cada vez que una de las entradas cambie, debe verificar en el mismo div si otra entrada tiene valor, si lo tiene, entonces calcular la tercera entrada.

por ejemplo, si el valor de la entrada M => X => A es 2, entonces el usuario ingresa 3 en M => X => B, entonces M => X => C se establece automáticamente en 5

2. Si un input cambia, debería actualizar otro input que tenga la misma clase en el MISMO div abuelo.

por ejemplo, si el valor de la entrada M => X => A se establece en 5, entonces se debe establecer 5 en la entrada M => Y => A

Pensando en la forma de jQuery es fácil porque puedo hacer un solo bind a todos los inputs y puedo saber qué input disparó el evento de cambio, luego puedo navegar en el DOM desde el input que se disparó.

Pero quiero saber cómo hacerlo correctamente de la manera de Angular. this.form.valueChanges() no muestra qué entrada ha sido cambiada, y No me gusta suscribirme a cada entrada por separado, no me gusta poner algunos enlaces en cada entrada en la plantilla de Angular, porque si hay demasiadas entradas necesito hacer mucho trabajo, y no quiero usar algo como getElementsByClassName que es la 'forma de jQuery', ¿alguna idea?

¡Gracias de antemano!

Respuesta #1

Puedes definir formControlName en cada entrada y luego verificarlas cuando cualquiera de ellas cambie. El valor de formControl probablemente lo puedas obtener así

this.form.get("formControleName");

o puedes definir formControle y luego suscribirte a eso

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

Hay otra opción, pero no la recomendaré.

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

y luego comprobar si el elemento tiene valor

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

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