Creating ion-input's dynamically

Question

Im tryng to create ,inside a Form , dynamically a row with 6 columns that will have 6 ion-input's and ill retrieve it via ngModel. The problem is how can i make the ngModel tags also get created dynamically so they are unique? atm they get repeated and its not what i need.

    <ion-content>
     <ion-grid>
      <form #f="ngForm" (ngSubmit)="postDados(f)" >
       <ion-row class="row header">
        <ion-col class="col">Nervos</ion-col>
        <ion-col class="col">Service Code</ion-col>
        <ion-col class="col">Pay Limit</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>        
   </ion-row>
   <ion-row class="row" *ngFor ="let nervo of nervos">
      <ion-col class="col">
          <ion-input type="text" name="categoria" ngModel #categoria="ngModel"></ion-input>  
      </ion-col>
      <ion-col class="col">
          <ion-input type="text" name="nome" ngModel #nome="ngModel"></ion-input>
      </ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>             
  </ion-row>
</form>
  <ion-row>
    <ion-col col-6>
        <ion-input type="text" [(ngModel)]="nomeNervoNovo" name="nomeNervoNovo"></ion-input> 
    </ion-col>
    <ion-col col-6>
        <button ion-button (click)="pushRow(nomeNervoNovo)" color="danger">
            Inserir
        </button> 
    </ion-col>  
    </ion-row>                      
    <ion-item>
          <button [disabled]="cadastro.invalid" ion-button full block color="danger">Enviar</button>
        </ion-item>

The button pushes a new item in the nervos array so it creates a new row with the 6 columns.

score 1 · Accepted Answer · answered Oct 30 '17 at 04:31

1

Since this is a form, together with the ngModel and name you register the form control. So making each name unique, means that your fields are all unique and not referring to one and same field. So for your iteration track the current index, and incorporate the index value to your name attributes however you like, for example like the following:

<!-- track index of iteration -->
<ion-row class="row" *ngFor ="let nervo of nervos; let i = index">
  <ion-col class="col">
    <!-- add index to 'name' attribute -->
    <ion-input type="text" name="categoria{{i}}" ngModel #categoria="ngModel"></ion-input>  
  </ion-col>
  <ion-col class="col">
    <ion-input type="text" name="nome{{i}}" ngModel #nome="ngModel"></ion-input>
  </ion-col>

answered Oct 30 '17 at 04:31

AT82

71,416
24
140
167

Thanks man that works, i was about to try using FormArray creating a formarray with this method pushRow(){ const control = new FormControl(null); (this.form.get('nervosControl')).push(control)} Worked for 1 input field, but i get error while tryng to do this 6 times on the method as ill need 6 arrays for my inputs, " type void has no compatible call signature" not sure why tho, ill go with your method for now since is more simple. ty have a nice day – Daniel Bezerra De Menezes Oct 30 '17 at 13:08
I think it has to be a formarray =/ this way with the {{i}} makes them unique, but every input is treated as 1 single object in json, i need 1 object per row, i think formarray is probably the only way to do it, what do u think? – Daniel Bezerra De Menezes Oct 30 '17 at 13:14
You are very welcome! If you want to go the reactive route, which I like better myself, since you have better control over the form. I think this answer of mine is pretty clear for how to handle formarray's (?), you need to push your fields (each row) as a formgroup to your formarray, that should work just fine, if I have understood your purpose correctly :) :) https://stackoverflow.com/questions/43520010/angular-4-form-formarray-add-a-button-to-add-or-delete-a-form-input-row/43521492#43521492 – AT82 Oct 30 '17 at 13:14
1

Nice that post is perfect, ill put it in practice ty – Daniel Bezerra De Menezes Oct 30 '17 at 13:16

Creating ion-input's dynamically

1 Answers1