Cast $event(in .html) to NgForm (in .ts), for DRY purpose

so here is the condition
I’m making multi template driven form, if satisfied then ionic-slide will trigger next.

which mean i had to pass the value of #currentForm="ngForm" to the TS function submitForm(#currentForm) then check if currentForm.valid in the ts

problem is that, i cannot make any dynamic ID #anotherForm, #anotherForm2 because of angular syntax hence i must rewrite all other forms

do you have any sugestion how to make it DRY

i have an idea to submitForm($event) and cast event as NgForm but cannot

  <ion-slide >
            <form class="ionContent" #idVechileForm="ngForm"  (submit)="completionFormSubmit(idVechileForm)">
              <ion-list *ngFor="let currentBaseForm of this.vechileForm.baseForms" >
                    <floating-input [parentForm]="idVechileForm" [baseForm]="currentBaseForm"></floating-input>

              <button  ion-button=""  type="button" (click)="slidePrevious()" color="light">Previous</button>
              <button  ion-button=""  color="primary">Next</button>

        <ion-slide >

          <form class="ionContent" #idHostForm="ngForm"  (submit)="completionFormSubmit(idHostForm)">
            <ion-list *ngFor="let currentBaseForm of hostForm.baseForms">
              <floating-input  [parentForm]="idHostForm" [baseForm]="currentBaseForm"></floating-input>
            <button  ion-button=""  type="button" (click)="slidePrevious()" color="light">Previous</button>
            <button  ion-button="" color="primary">Submit</button>

  completionFormSubmit(form: NgForm) {
    if (form.valid) {
      for(var key in form.value){
        this.formValues[key] = form.value[key];
    else {
      this.alert("Field(s) is not valid");


@davidvalen95 Have you had any luck with this? I am working on a similar problem

no, i rewrite all slide, 7 slide :smiley:


1 Like

now im facing this again. but now solved by make the form as an component that having @input bind-directive of onValid and FormContainer value

public formContainerValue = {};
public slideNext:()=>void = ()=>{

<ion-slides #formSlides >
  <ion-slide  *ngFor="let form of forms; let i" >
    [formValue] = "form"

next and back button inside indepent form depends on current counter

or even better, you can pass the #formSlides to independentForm, and do the next logic in the independent-form-component.ts instead of in the Page.ts