Am i do anything wrong here

<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

found the problem it’s ion lable is not closed there
thank you people

2 Likes

amazing thanks, had a similar problem i missed!