<form [formGroup]="userForm">
<ion-grid>
<ion-row>
<ion-col offset-15 width-30>
<ion-label>User Name</ion-label>
</ion-col>
<ion-col width-40>
<ion-input type="text" formControlName="userName"> </ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col offset-15 width-30>
<ion-label>First Name</ion-label>
</ion-col>
<ion-col width-40>
<ion-input type="text" formControlName="firstName"> </ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col offset-15 width-30>
<ion-label>Last Name</ion-label>
</ion-col>
<ion-col width-40>
<ion-input type="text" formControlName="lastName"> </ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col offset-15 width-30>
<ion-label>Email
</ion-col>
<ion-col width-40>
<div formArrayName="emails">
<div *ngFor="let email of emails.controls; let i= index">
<ion-input type="email" [formControlName]="i"> </ion-input>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</form>
{{userForm.value | json}}
The above code is just a simple form with reactive directives it is ok, if i remove ion-grid and add a ion-list , this above code working perfectly as expected, am i doing wrong anything here, because it not even parse the html say some kind of error as follows
Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ion-col" ("
<ion-col offset-15 width-30>
<ion-label>Email
[ERROR ->]</ion-col>
<ion-col width-40>
<div formArrayName="emails">
"): Userinfo@35:12
Unexpected closing tag "ion-row" ("
</div>
</ion-col>
[ERROR ->]</ion-row>
</ion-grid>
</form>
"): Userinfo@43:8
Unexpected closing tag "ion-grid" ("
</ion-col>
</ion-row>
[ERROR ->]</ion-grid>
</form>
{{userForm.value | json}}"): Userinfo@44:4
Unexpected closing tag "form" ("
</ion-row>
</ion-grid>
[ERROR ->]</form>
{{userForm.value | json}}"):
help please