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

Question

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

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,
    ...]
  ...

score 0 · Answer 2 · answered Nov 01 '16 at 15:49

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";
    }
}

Thanks. I've edited the question to fix this. The lines I provided were just for illustration. The actual code has closing quotes. Importing the NativeScriptFormsModule in app.module.ts is what fixed it for me. — Stephen, Nov 01 '16 at 16:59

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

2 Answers2