Nativescript: Ivy (Angular10) - Order issue with FormGroup / FormControl

Created on 21 Aug 2020  路  3Comments  路  Source: NativeScript/NativeScript

Since we have tried to enable Ivy, and now that we are trying to upgrade to Angular10, we have discovered an issue with the order of components inside a formGroup.

The issue happens only when you put an ngIf such as :
<TextField [(ngModel)]="entry1" [formControl]="form.controls['entry1']"></TextField>
<TextField [(ngModel)]="entry2" *ngIf="entry3 != ''" [formControl]="form.controls['entry2']"></TextField>
<TextField [(ngModel)]="entry3" [formControl]="form.controls['entry3']"></TextField>

You can download the full example here.
screenshot

NativeScript version : latest (6.8.0)
@angular/core : 10.0.0
@nativescript/core : rc (7.0.0-rc.52)

in progress

Most helpful comment

Hi @ragu89
Thank you for reporting this issue.
We are going to try replicate this case on our end and will confirm. We will research what is causing this issue and will provide the needed fix. For further info, you could keep track the issue.

All 3 comments

Hi @ragu89
Thank you for reporting this issue.
We are going to try replicate this case on our end and will confirm. We will research what is causing this issue and will provide the needed fix. For further info, you could keep track the issue.

I have the same problem, it seems that whenever there is an * ngIf it is rendered last and loses its place in the order of the template and is added at the end of the queue. In my case they are a series of StackLayout. Example:

<StackLayout><Label text="Label 01" *ngIf="condition"></Label> </StackLayout>
<StackLayout><Label text="Label 02"></Label> </StackLayout>
<StackLayout><Label text="Label 03"></Label> </StackLayout>

Result:
Label 02
Label 03
Label 01

"nativescript": "^7.0.8",
"@nativescript/core": "~7.0.0",
"@angular/core": "~10.1.0",

This issue is now fixed with @nativescript/angular 10.1.3 published now 馃憤

Was this page helpful?
0 / 5 - 0 ratings