CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Stephen
Stephen

Reputation: 21

Broken data binding after updating to {N} 2.3.0 and Angular 2.1.2

After updating my project to Nativescript 2.3.0 and Angular 2.1.2, data binding using ngModel is no longer working on my Switches. If I bind to [checked] and (propertyChange) it works.

I've duplicated issue this in a new sample project. Is this a change that was made to Nativescript or Angular or could it be something else?

I was using:

<Switch (ngModelChange)="onChange($event)" [ngModel]="model.switchValue"></Switch>

onChange() is no longer firing when the Switch is toggled.

This seems to work:

<Switch (propertyChange)="onChange($event)" [checked]="model.switchValue"></Switch>

I've also noticed some other issues since the update but may address them in another question.

Upvotes: 1

Views: 176

Answers (2)

Nick Iliev
Nick Iliev

Reputation: 9670

You have also small syntax error as the closing Quotation mark is missing for your ngModelChange.

The example is working on my side - here is the code I have tested:

page.xml

<Label [text]="thirdSwitchState" textWrap="true"></Label>
<Switch [ngModel]="thirdSwitchValue" (ngModelChange)="onChange($event)"></Switch>

page.ts

public thirdSwitchValue = true;
public thirdSwitchState = "ON";

public onChange(result) {
    if (result) {
        this.thirdSwitchState = "ON";
    }
    else {
        this.thirdSwitchState = "OFF";
    }
}

Upvotes: 0

Stephen
Stephen

Reputation: 21

It turns out that this was a variation of this question. I needed to reference the NativeScriptFormsModule. At first I tried Angular's FormsModule, but got the error:

No value accessor for form control with unspecified name attribute

The fix was to import NativeScriptFormsModule in app.module.ts:

import { NativeScriptFormsModule } from 'nativescript-angular/forms';

@NgModule({
  imports: [
    NativeScriptFormsModule,
    ...]
  ...

Upvotes: 1

Related Questions