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
– Suraj Rao, Commented Feb 18, 2019 at 12:16
depends on the controls in the array this.clientForm = this._fb.group({ assign_array: this._fb.array([]) }); — Suraj Rao
– Suraj Rao, Commented Feb 18, 2019 at 12:28

Mustafa Lokhandwala · Accepted Answer · 2019-02-18 11:18:30Z

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, 2019 at 11:18

Mustafa Lokhandwala

81410 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suraj Rao Over a year ago

OP is using reactive form not ngModel

AVJT82 · Accepted Answer · 2019-02-18 19:27:32Z

0

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>

answered Feb 18, 2019 at 19:27

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Collectives™ on Stack Overflow

Unable to bind form with input ionic

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related