0

He estado buscando por todo el foro, pero no encuentro la solución o orientación para mi problema en específico.

se trata de pasar lo que escribo en un Input HTML a otro Inpunt lo que quiero específicamente es que al momento de escribir en el primer input valla escribiendo en el segundo de inmediato, Se podrá?

Estoy usando Angular 7

2
  • 2
    Claro que se puede, agrega el código que has intentado. Te orientamos. Commented el 22 may. 2019 a las 16:07
  • Basta con usar ngModel, pero como dice el anterior comentario, muéstranos que has intentado hasta ahora Commented el 22 may. 2019 a las 16:49

3 respuestas 3

1

Puedes hacer dos cosas:

  1. Poner el mismo formControlName a los dos campos

Nota: Esto hace que al escribir en el campo 1 ponga el mismo texto en el campo 2, esto tiene un problema al momento de enviar los datos o al limpiar el campo ya que si limpia uno el otro también se limpiara y al enviar los datos puede que no se envien.

  1. Puedes tener los dos input con formControlName diferentes y creas un método que ingrese el texto al presionar las teclas en el otro campo de esta forma:

Al campo en el html agregas este codigo puedes utilizar cualquiera de los dos

(keypress)="pruebaKey()"

(input)="pruebaKey()"

Puedes agregar cualquiera de los dos

Y en el component agregas el siguiente código:

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

Así al momento de escribir ingresa el texto en el otro campo y tienes dos valores diferentes por campo ya que los formControlName son diferentes

Trata de agregar la opción dos a tu código, por eso en la respuesta puse la nota , si pones dos campos con el mismo formcontrolname tendrás problemas al enviar la información o eliminarla del campo , la mejor opción es la 2 , poner dos controles con nombres diferentes y setear el valor de uno al otro

 pruebaKey() {
        this.formularioForm.get('campoUno').setValue(this.formularioForm.get('CampoDos').value);
    }
1
  • Revisa la opción dos de esta respuesta, creo que esta te servirá Commented el 22 may. 2019 a las 21:37
0

Te dejo el modo mas simple de hacerlo con angular. como te dije en los comentarios, solo basta con usar ngModel. te dejo un simple ejemplo:

En app.component.html:

<!-- la directiva ngModel tiene que apuntar a la misma variable -->
<input id="uno" type="text" [(ngModel)]="dato">

<input id="dos" type="text" [(ngModel)]="dato">

en app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // ESTA ES LA VARIABLE IMPORTANTE DE TODO ESTE ARCHIVO PARA QUE FUNCIONE LA DIRECTIVA ngModel
  dato="";
}

Esta directiva hace que el primer input lea o escriba la variable y el segundo input tambien lo lea o escriba, cosa que ambos inputs van a depender de la manipulación de la misma variable. Inclusive el segundo input también puede modificar el primer input.


Ahora si no quieres que el segundo input haga el cambio al primero solo tienes que cambiar en ngModel del segundo por un value con la variable dato. Por ejemplo:

<input id="dos" type="text" value="{{ dato }}">

Espero te sirva.

0

He hecho lo que me has dicho, pero no funciona creo que algo hago mal

por lo que estoy entendiendo solo necesitaba agregar el formcontrol name un nombre de campo (quiero que el input 2 haga lo mismo del input 1, entonces si el 1 se borra el 2 también)

hay que agregar la misma linea en el component.ts?

este es mi código HTML

<div class="row align-content-center">
<div class="col col-xl-6 col-lg-12">
  <div class="card mb-3">
    <div class="card-header bg-primary">
      <p class="text-white">pasar info entre inputs</p>
    </div>
    <div class="card-body table-responsive">
      <table class="table">
        <thead>

        </thead>
        <tr>
          <td colspan="4">
            <input type="text" 
                   class="form-control"
                   formControlName="campouno" 
                   placeholder="Ingrese texto">
          </td>
        </tr>
        <tr>
            <td colspan="4">
              <input type="text" 
                     class="form-control"  
                     formControlName="campouno">
            </td>
        </tr>
      </table>
    </div>
  </div>
</div>
1
  • Felipe, te recomiendo que tus comentarios vayan en la seccion de comentarios y no en la seccion de respuestas. pueden reportarte por esto. Commented el 22 may. 2019 a las 17:18

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.