Double Binding of variables on component.ts and html in nativescript angular not working in certain page. (Working in only login page though)

Question

In this html component, the model gets updated as expected.

login.component.html

<FlexboxLayout>
    <StackLayout class="form" [class.dark]="!isLoggingIn">
        <Image src="~/images/logo.png"></Image>
        <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" [(ngModel)]="user.email"
        class="input input-border"></TextField>
        <TextField hint="Password" secure="true" [(ngModel)]="user.password" class="input input-border"></TextField>
        <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" class="btn btn-primary" (tap)="submit()"></Button>
        <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
    </StackLayout>
</FlexboxLayout>

login.component.ts

export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;

  constructor(private page: Page, private router: Router, private userService: UserService) {
    this.user = new User();
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
    this.page.backgroundSpanUnderStatusBar = true;
    this.user['email']='[email protected]';
    this.user['password']='passmein';
  }
}

But double binding doesn't seem to be working in other pages. It's an edit page.

html

<FlexboxLayout>
    <StackLayout class="form">
        <Image src="~/images/logo.png"></Image>
        <TextField hint="The make of the car" autocorrect="false" autocapitalizationType="none" [(ngModel)]="car.make"
        class="input input-border"></TextField>
        <TextField hint="Model" autocorrect="false" autocapitalizationType="none" [(ngModel)]="car.model"
        class="input input-border"></TextField>
        <Button text="Save" class="btn btn-primary" (tap)="submit()"></Button>
    </StackLayout>
</FlexboxLayout>

tns

export class UpsertVehicleComponent implements OnInit {
  car:Vehicle;
  new: boolean = true;
  constructor(private page: Page, private router: Router, private route: ActivatedRoute, private vehicleService: VehicleService) { 
    this.car = new Vehicle();
  }

  ngOnInit() {
    var id = this.route.snapshot.paramMap.get("id");
    this.car['make'] ='check';
  }

}

But the output wouldn't show up on the html page. What is different here? Is there some missing module that needs to be imported into the submodule the edit component belongs to?

Yes, the nativescript forms modules has to be imported in your submodules too. — Manoj
– Manoj, Commented Feb 9, 2019 at 10:19
Yes, it would. If it still doesn't, you may share a Playground Sample which could be easy to debug. — Manoj
– Manoj, Commented Feb 9, 2019 at 13:00

Manoj · Accepted Answer · 2019-02-09 13:10:56Z

1

You must be missing NativeScriptFormsModule in your module, importing it will solve the problem.

answered Feb 9, 2019 at 13:10

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Double Binding of variables on component.ts and html in nativescript angular not working in certain page. (Working in only login page though)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related