Right. This is an extremely common problem, and I have found the best way to avoid it is to just initialize everything right where it is defined, so you can be assured at a glance that the template will never see undefined
.
Matter of preference. I tend to use reactive forms when validation is involved, and not when it isn’t.
One subtle thing I don’t like that may or may not bite you is having both [(ngModel)]
and (ionChange)
. In general, one of my design rules is akin to the apochryphal Confucian saying about the man with two watches never being sure what time it is: “everything needs only one owner”. If you really need a change handler, I would take the banana out of the box and go with [ngModel]="foo" (ionChange)="fooChanged($event)"
and update foo
manually in fooChanged()
. The concrete problem that bit me once here was if the change handler modifies the two-way bound property, change detection pukes and throws a “changed after checked” error.
Additionally, a couple of things about this line:
<ion-toggle [(ngModel)]="currentAlert.enabled" checked={{currentAlert.enabled}}></ion-toggle>
Prefer [foo]="bar"
over foo="{{bar}}"
. Rationale here. In this case, you should get rid of checked
entirely. It’s not harmful, but it is trumped by the presence of [(ngModel)]
, and having it in there might lure readers into believing it was doing something.