0

I'm learning Ionic 3 and I want create a dynamic form.

A dynamic form for me is a form that increases when I press a FAB button (like alarm native app in Android), I read dynamic forms in angular page but I think it's not what I'm looking for.

This is my code, but I think my base idea is correct, it's possible create something like this in Ionic 3?

<ion-list id="horario-list9">
      <ion-item-divider color="light" id="horario-list-item-divider3">
        <ion-list-header>
          <h2>{{titles[0]}}</h2>
        </ion-list-header>
      </ion-item-divider>
      <ion-item id="horario-range1">
        <ion-range style="padding-left:0px" [(ngModel)]="quantity1" min="0" max="6" step="1" color="balanced" value="0" name="ration1">
          <ion-icon range-left>
            <img src="assets/imgs/cup.svg" alt="" height="40px" width="40px">
          </ion-icon>
          <ion-label range-right>
            <div *ngIf="quantity1; else other_quantity1">
              <p style="font-size:40px;color:#AED581">{{quantity1/2}}</p>
            </div>
            <ng-template #other_quantity1>
              <p style="font-size:40px;color:black">0</p>
            </ng-template>
          </ion-label>
        </ion-range>
      </ion-item>
      <ion-item>
        <ion-label>
          <ion-icon name="md-time" style="font-size:50px"></ion-icon>
        </ion-label>
        <ion-datetime style="font-size:40px" displayFormat="HH:mm" pickerFormat="HH mm" [(ngModel)]="event.timeStarts1"></ion-datetime>
      </ion-item>
      <div class="spacer" style="width:300px;height:30px;" id="horario-spacer6"></div>
      <ion-fab center>
        <button ion-fab color="secondary"><ion-icon ios="ios-add" md="md-add"></ion-icon></button>
      </ion-fab>
</ion-list>

This look like this My form in Safari

I want create a dynamic form, I need when I press my green button add new ion-item in my list, it's possible? Angular documentation failed to explain this question

Fabian Estay
  • 1
  • 2
  • I think you could use [alert](https://ionicframework.com/docs/api/components/alert/AlertController/) or [modal](https://ionicframework.com/docs/components/#modals) – Duannx Nov 02 '17 at 06:42
  • What you seem to be wanting is a reactive form: https://angular.io/guide/reactive-forms Here's a sample of another question: https://stackoverflow.com/questions/43520010/angular-4-form-formarray-add-a-button-to-add-or-delete-a-form-input-row/43521492#43521492 – AT82 Nov 04 '17 at 10:51

0 Answers0