Form validation

[wschroers]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): √ Getting NativeScript components versions information... √ Component nativescript has 6.5.0 version and is up to date. √ Component tns-core-modules has 6.5.0 version and is up to date. √ Component tns-android has 6.5.0 version and is up to date. √ Component tns-ios has 6.5.0 version and is up to date.

• Angular: 8.3.25

Describe the bug Form validation seem to be broken when form elements exist inside a StackLayout with *ngIf defined on it. I'm using a form with multiple input fields but some of them should only be visible if a certain condition is met. The *ngIf is causing an exception with the following message: ERROR TypeError: undefined is not an object (evaluating '_co.item2.valid')

To Reproduce

<StackLayout class="nt-input">
	<Label text="item 1" class="nt-label"></Label>
	<TextField class="-border -rounded-sm" [(ngModel)]="model.item1" #item1="ngModel" required></TextField>
	<Label class="validation" *ngIf="(item1.dirty && !item1.valid)" text="item1 required" ></Label>
</StackLayout>
<StackLayout class="nt-input" *ngIf="item2visible">
	<Label text="item 2" class="nt-label"></Label>
	<TextField class="-border -rounded-sm" [(ngModel)]="model.item2" #item2="ngModel" required></TextField>
	<Label class="validation" *ngIf="(item2.dirty && !item2.valid)" text="item2 required" ></Label>
</StackLayout>
<Button [isEnabled]="item1.valid && (item2visible == false || item2.valid) (tap)="sendRequest()" class="nt-button -primary -rounded-sm"></Button>

Any help would be appreciated, thanks.

[csimpi]

@jiswo In the meantime, the visibility property might help. https://docs.nativescript.org/api-reference/modules/ui_enums.visibility

[wschroers]

@csimpi, thanks for the suggestion, will give that a try.

[Debaditya-Som]

The bug mentioned appears to be related to form validation and the use of *ngIf on the StackLayout containing the form elements. The error message indicates that the item2 variable is undefined when trying to access its valid property. One possible solution to this issue is to use *ngIf directly on the individual form elements inside the StackLayout, rather than using it on the entire StackLayout. This way, the form elements are only created when they need to be visible, and the references to item2 will not be accessed when it's not present.``