Unable to bind form with input ionic

Question

I want to bind my dynamic input fields with ionic html template.

home.html

    <form [formGroup]="clientForm">
     <ion-item *ngFor="let obj of clientForm.controls.assign_array.controls;let z=index">
            <ion-input placeholder="Type dat" type="text"></ion-input>
          </ion-item>
    </form>

home.ts

constructor(){
 this.clientForm = this._fb.group({
   assign_array: this._fb.array([])
 });
}

On save click:

btnClick(){
    console.log("clintform--- " + JSON.stringify(this.clientForm.value));
}

Output: { "assign_array":[ "", "", "" ] }

I can see multiple input fields in my app, but when i type something to each field my log doesn't show the value of assign_array fields

Where i am making mistake?

Thank you in advance!

you need to set `formControlName` in ion input for reactive form to work — Suraj Rao, Feb 18 '19 at 12:16
depends on the controls in the array `this.clientForm = this._fb.group({ assign_array: this._fb.array([]) });` — Suraj Rao, Feb 18 '19 at 12:28
Maybe check https://stackoverflow.com/questions/48436145/angular-reactive-forms-with-nested-form-arrays — Suraj Rao, Feb 18 '19 at 12:35

score 0 · Answer 1 · answered Feb 18 '19 at 11:18

0

You have to just use [(ngModel)] in your html like this.

<ion-input placeholder="Type dat" type="text" [(ngModel)]="inputFieldValue"></ion-input>

and in .ts file

public inputFieldValue;
console.log("--------inputFieldValue-------",inputFieldValue)

Hope this can help you out.

answered Feb 18 '19 at 11:18

Mustafa Lokhandwala

724
9
22

3

OP is using reactive form not ngModel – Suraj Rao Feb 18 '19 at 11:40

score 0 · Answer 2 · answered Feb 18 '19 at 19:27

You need to mark a formControlName for your inputs, since you want string values, you can just use the index as formcontrolname, which you get from your iteration:

<form [formGroup]="clientForm">
  <ion-item *ngFor="let obj of clientForm.get('assign_array').controls; let z=index">
    <ion-input [formControlName]="z" placeholder="Type dat" type="text"></ion-input>
  </ion-item>
</form>

Unable to bind form with input ionic

2 Answers2