0

Llevo rato pensando cómo colocarle un nombre diferente a cada input que está en un ciclo ngfor.

Tengo 3 ion cards en total, 2 que se generaron demás en el ciclo ngfor.

El primer ion card tiene un formulario con 3 inputs que tienen su name pero como están en un bucle no sé cómo poder en ese bucle generar que tenga cada input un name diferente para que por la aproximación por template pueda almacenar lo que el usuario ingrese al formulario.

Código html:

                <ion-card-title style="font-family: AvenirLTStd-Black; position: relative; left: 30px; top: 7px; ">
                    Inversiones</ion-card-title> <!-- acá tengo que arreglar esto-->
                <ion-card *ngFor="let item of datosi2; let i = index;">
                    <ion-card-content>

                        <ion-label style="font-family: AvenirLTStd-Black; ">
                            {{ item.description }}
                            <br>
                            <form #formulario="ngForm" (ngSubmit)="onSubmit()">

                                <ion-item>
                                    <ion-input type="number" placeholder="Awesome Input" name="number"  
                                        [(ngModel)]="card1.inversionesNegociables" required ></ion-input>
                                    <ion-label>{{ formulario.valid }} </ion-label>
                                </ion-item>
                                <ion-label>
                                    {{ item.content }} | {{ formulario.valid }}
                                </ion-label>
                                <ion-input type="number" placeholder="Awesome Input" name="number1"  
                                    [(ngModel)]="card1.inversinesDisponibles"  required></ion-input>
                                <ion-label>
                                    {{ item.content1 }} | {{ formulario.valid }}
                                </ion-label>
                                <ion-input type="number" placeholder="Awesome Input" name="number2" 
                                    [(ngModel)]="card1.participacionFondos"  required></ion-input>

                                <ion-button type="submit" expand="block">
                                    Click me
                                </ion-button>
                            </form>
                        </ion-label>
                    </ion-card-content>

                </ion-card>

Código ts:


  card1= {
    inversionesNegociables: '',
    inversinesDisponibles: '',
    participacionFondos:''
  }


  datosi2: any[] = [
    {
      description: 'Inversiones negociables en títulos de deuda(120400)*',
      content: 'Inversiones disponibles para la venta en títulos de deuda(121300)*',
      content1: 'Participación en fondos de inversión colectiva abiertos sin pacto de permanencia(123016)*'
    },
    {
      description: 'FONDO DE LIQUIDEZ - Cuentas corrientes(112001)*',

    },
  ];

constructor() { }

ngOnInit() {
}

  onSubmit(){
    console.log('submit')
  } 

}

1
  • Hola Stiven, sin poder examinar más código, no es fácil darte una respuesta, pero crearía una variable ts public cards:any = [...datosi2] html utiliza en indice i [(ngModel)]="cards[i].participacionFondos" , espero que te sirva, saludos. Commented el 24 sept. 2022 a las 20:33

1 respuesta 1

0

Vale lo que sucede no es tanto el name del input, sino más bien que estas utilizando el objeto "card1" al mismo tiempo;

Es decir cuando llenas el formulario en el indice 0

Lo que sucede es que el ngModel en ese momento setea el objeto "card1" y lo llena

Y cuando hace la siguiente iteración al indice 1

Como ya esta lleno el card1 lo que hace es sobrescribirlo y tomar el más reciente

En este caso en particular la solución es que por cada iteración generes un nuevo objeto card1 para que los datos no se troquen, de igual forma considero que si son pocos los objetos card1 podrías definirlos en el ngOnInit de forma manual y solo pasarle el índice, algo así:

TS:

export class Tab1Page {

  public card1: FormGroup;
  public card2: FormGroup;

  constructor() {}

  ngOnInit()
  {
    this.card1 = new FormGroup({
      inversionesNegociables: new FormControl(''),
      inversinesDisponibles: new FormControl(''),
      participacionFondos: new FormControl(''),
    });
    
    this.card2 = new FormGroup({
      inversionesNegociables: new FormControl(''),
      inversinesDisponibles: new FormControl(''),
      participacionFondos: new FormControl(''),
    });
  }
  


  datosi2: any[] = [
    {
      description: 'Inversiones negociables en títulos de deuda(120400)*',
      content: 'Inversiones disponibles para la venta en títulos de deuda(121300)*',
      content1: 'Participación en fondos de inversión colectiva abiertos sin pacto de permanencia(123016)*'
    },
    {
      description: 'FONDO DE LIQUIDEZ - Cuentas corrientes(112001)*',

    },
  ];

  generateCard(index: number = 0)
  {
    if(index == 0)
    {
      return this.card1
    }
    else
    {
      return this.card2
    }
  }
}

HTML:

<ion-card *ngFor="let item of datosi2; let i = index;">
    <ion-card-content>
        <ion-label >
            {{ item.description }}
            <br>
            <form #formulario="ngForm" (ngSubmit)="onSubmit()" [formGroup]="generateCard(i)">

                <ion-item>
                    <ion-input type="number" placeholder="Awesome Input" 
                    formControlName="inversionesNegociables"    required ></ion-input>
                    <ion-label>{{ formulario.valid }} </ion-label>
                </ion-item>
                <ion-label>
                    {{ item.content }} | {{ formulario.valid }}
                </ion-label>

                <ion-input type="number" placeholder="Awesome Input"   
                    formControlName="inversinesDisponibles"    required></ion-input>
                <ion-label>
                    {{ item.content1 }} | {{ formulario.valid }}
                </ion-label>

                <ion-input type="number" placeholder="Awesome Input" 
                    formControlName="participacionFondos"    required></ion-input>

                <ion-button type="submit" expand="block">
                    Click me
                </ion-button>
            </form>
        </ion-label>
    </ion-card-content>
  </ion-card>

RESULT:

introducir la descripción de la imagen aquí

Como puedes darte cuenta en el 2do card los datos no se repiten a los del primero sino son diferentes, e incluso si dejo el ultimo campo vacio esta validando que ese campo esta vacio, pero el punto fue que se crearon 2 objetos, en este caso use mejor el FormGroup para definir el formulario, puedes usar el FormGroup para incluso organizarlos, validarlos y ver sus propiedades de forma más ordenada, pero igual de mi parte creo que no es lo más optimo porque a la larga si sumas más objetos o creas más instancias card1, quiza se vuelva más complejo de manipular los datos, tambien existe la manera de crear variables nuevas de manera dinamica en vez de definir todo en el ngOnInit, y esa parte es con eval o con el objeto Window, pero no son buenas practicas hacerlo de estas ultimas maneras que te menciono

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.