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


#1

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 >
          <h2>{{this.vechileForm.title}}</h2>
            <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>
              </ion-list>

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

        <ion-slide >

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


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


  }

#2

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


#3

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

goodluck


#4

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

page.ts
public formContainerValue = {};
public slideNext:()=>void = ()=>{
      this.formSlides.lockSwipes(false);
      this.formSlides.slideNext(100);
      this.formSlides.lockSwipes(true);
}

page.html
<ion-slides #formSlides >
  <ion-slide  *ngFor="let form of forms; let i" >
   <independent-form 
    [formValue] = "form"
    [onValid]="slideNext"
    [formContainer]="this.formContainerValue"
    [counter]="i"
   </independent-form>
  </ion-slide>
</ion-slides>

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