Template driven forms with ionic2 app

Ionic Framework ionic-v3
1

I’m trying to pass data from form input fields to be used in a function within my component using ngForm and ngModel. However I get the following error:

self.context.hello is not a function

here is my code:

In the view

<form novalidate (ngSubmit)="onSubmit(myForm)" #myForm="ngForm">
    <div *ngFor=" let selectedService of selectedService.params ">
        <ion-item *ngFor=" let key of selectedService | keys ">
            <ion-label floating>{{key}}</ion-label>
            <ion-input type="number" name="{{key}}" ngModel></ion-input>
        </ion-item>
    </div>
    <button ion-button type="submit" block>{{selectedService.name}}</button>
</form>

In the component

@Component({
  selector: 'page-selected-service',
  templateUrl: 'selected-service.html'
})

export class SelectedServicePage {
  onSubmit(myForm){
    if(myForm.valid){
      console.log(myForm.value);
    }
  }
}
2

hi onyekam,

I think they are many different way to do that.

I do like this :

<form #myForm="ngForm" novalidate>
    <ion-item>
	<ion-input [(ngModel)]="select.name" name="name" type="text" >
	</ ion-input>
   </ ion-item>
<button ion-button (click)="onSubmit(myForm)" type="submit" block>send</button>
</ form>

and

export class SubmitPage{
	select: {name?: string} = {};
	submitted = false;

	constructor() { }

	onSubmit(form) {
		this.submitted = true;
                console.log(this.select);
           }
}

and just for the fun you can put a default value (for example implement by localStorage or service )

constructor() { this.select.name = “My Name”; }

I hope that can help you

3

@THIERRYSCO Thanks for your input. This method would work under normal circumstances, but if you notice from my code I am iterating over an associative array of parameters (key-value pairs) to create input fields and “name” those input fields according to their array keys and return the input values with the onclick function. The problem here is I will not always know how many parameters there would be nor know what the keys those parameters would be called; therefore I cannot statically define a model in the component to handle the form submission.

5

I think you have to use a service for that.

But for simple :

  <div *ngFor="let c of select">
	<ion-item>
    <ion-input [(ngModel)]="c.name" name="name" type="text" #celuici >{{c.key}}</ ion-input>
	</ion-item>
  <button ion-button outline type="button" (click)="onSubmit(celuici)" >send</button>
  </div>

And

export class SubmitPage{
  select: Array<{name?: string, key?:string}>;

  constructor(private navController: NavController) { 
    this.select = [ 
                        {name : "Paul", key : "bonjour"}, 
                        {name : "Alfred", key : "aurevoir"}
                        ]
    
                }
  
	onSubmit(form) {
                console.log(form.value);
                console.log(this.select);
           }
}

In fact ngForm it’s not really necessary in this case, I think.
As I wrote, they are a lot of different way.

6

Just a last thing.

I think for you the best way it’s to not use a button.

  <div *ngFor="let c of select">
	<ion-item>
	  <ion-label>{{c.name}}</ion-label>
    <ion-input [(ngModel)]="c.key" name="key" type="text" #celuici (change)="changeKey(celuici)"></ ion-input>
	</ion-item>
  </div>

And

export class SubmitPage{
  select: Array<{name?: string, key?:string}>;

      constructor(private navController: NavController) { 
        this.select = [ {name : "Paul", key : "bonjour"}, {name : "Alfred", key : "aurevoir"}]
        
      }
      
    	changeKey(form) {
                    console.log(form.value);
                    console.log(this.select);
               }
    }
7

@THIERRYSCO Hello!! Problem solved. Thanks for your input though; turns out that I was doing the right thing all this while, but I was working on the wrong file (the temporary version of my .ts file - I feel so silly right now). This explains why it was not finding the function. Thanks a lot for the help