0

Hola estoy trabajando con angular 14 y estaba probando la comunicación entre 2 inputs pertenecientes a un formulario, el inconveniente viene porque estoy utilizando [(ngModel)] para tener la comunicación entre los 2 inputs que si alguno de los 2 cambia este afecte al otro con el valor introduccido, el fragmento del formulario es este:

         <table class="example-full-width" cellspacing="0">
            <tr>
              <td>
                <mat-form-field class="example-full-width" color="accent" appearance="fill">
                  <mat-label>Diámetro Exterior</mat-label>
                  <input matInput type="number" formControlName="CamisaDiametroExterior" required>
                </mat-form-field>
              </td>
              <td>
                <mat-form-field class="example-full-width" color="accent" appearance="fill">
                  <mat-label>Diámetro Interior</mat-label>
                  <input matInput type="number" formControlName="CamisaDiametroInterior" required (change)="seleccionDEM1(inicio.value.CamisaDiametroInterior)" [(ngModel)]="valorDIntMamelon">
                </mat-form-field>
              </td>
              <td>
                <mat-form-field class="example-full-width" color="accent" appearance="fill">
                  <mat-label>Longitud</mat-label>
                  <input matInput type="number" formControlName="LongitudCamisa" required [(ngModel)]="valorDIntMamelon">
                </mat-form-field>
              </td>
            </tr>
          </table>

Ocupo el formControlName para ir identificándolo, pero al hacer uso de esta manera me arroja un mensaje diciendo:

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in a future version of Angular.

Para ello e investigado un poco y una de las posibles soluciones, que encontré fue la siguiente:

Incluirlo en los inputs que necesite (keypress)="pruebaKey()" y para asignarlo :

pruebaKey() {
    this.formularioForm.get('campoUno').setValue(this.formularioForm.get('CampoDos').value);
}

El detalle es que si lo necesito para varios campos, ahí tendría que declarar varios metodos para poder ir asignando, y no se si habría otra manera de solventar la necesidad sin tener que recurrir a ngModel

1
  • Esa misma función se puede mejorar si ingresas los nombres por parámetro: pruebaKey(c1:string,c2:string){ this.formularioForm.get(c1).setValue(this.formularioForm.get(c2).value); y ahí te queda genérica. El único problema al usar keypress, es que al copiar/pegar no te va a tomar el evento
    – Yussef
    Commented el 9 nov. 2022 a las 3:42

1 respuesta 1

0

No puedes mezclar reactive forms con template driven (ngModel).

Tienes varias opciones

  1. Si quieres cambiar un campo text basado en otro con una función debes de pasar el nombre de los 2 campos que quieres modificar y llamarla con (input)
       <table class="example-full-width" cellspacing="0" [formGroup]="form">
    <tr>
        <td>
            <mat-form-field class="example-full-width" color="accent" appearance="fill">
                <mat-label>Diámetro Exterior</mat-label>
                <input matInput type="number" formControlName="CamisaDiametroExterior" required>
            </mat-form-field>
        </td>
        <td>
            <mat-form-field class="example-full-width" color="accent" appearance="fill">
                <mat-label>Diámetro Interior</mat-label>
                <input matInput type="number" formControlName="CamisaDiametroInterior" required
                    (input)="seleccionDEM1(inicio.value.CamisaDiametroInterior)">
            </mat-form-field>
        </td>
        <td>
            <mat-form-field class="example-full-width" color="accent" appearance="fill">
                <mat-label>Longitud</mat-label>
                <input matInput type="number" formControlName="LongitudCamisa" required>
            </mat-form-field>
        </td>
    </tr>
</table>
export class AppComponent {
  public form: FormGroup;

  constructor(public fb: FormBuilder) {}

  public ngOnInit() {
    this.form = this.fb.group({
      CamisaDiametroExterior: [],
      CamisaDiametroInterior: [],
      LongitudCamisa: [],
    });
  }

  public seleccionDEM1(fieldName: string, fieldName2: string): void {
    this.form.get(fieldName2).setValue(this.form.get(fieldName).value);
  }
}

  1. La otra opción que tiene es escuchar los cambios del formulario y hacer las modificaciónes que quieras, en este caso no tendrías de necesidad de utilizar (input) o cualquier evento para escuchar los cambios de elemento. No olvides dessubscribirte del formulario cuando se destruye el componente pare evitar problemas de rendimiento a futuro
export class AppComponent {
  public form: FormGroup;

  private $formSub: Subscription;

  constructor(public fb: FormBuilder) {}

  public ngOnInit() {
    this.form = this.fb.group({
      CamisaDiametroExterior: [],
      CamisaDiametroInterior: [],
      LongitudCamisa: [],
    });

    this.onFormChanges();
  }

  private onFormChanges(): void {
    this.$formSub = this.form.valueChanges.subscribe(() => {});
    // utilizar patch value para cambiar los valores del form
    this.form.patchValue({
      CamisaDiametroExterior: 2,
      CamisaDiametroInterior: 1,
      LongitudCamisa: 10,
    });
  }

  public ngOnDestroy(): void {
    this.$formSub.unsubscribe();
  }
}

2
  • El detalle es que lo quiero de manera direccional, como es un formulario algo grande, hay valores que los usuarios necesitan ver y estos son iguales a los anteriores Commented el 9 nov. 2022 a las 14:59
  • No queda claro lo que buscas Commented el 11 nov. 2022 a las 5:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.