ngModel binding to a object property


#1

Hi, i’m having a little trouble with [(ngModel)].
Let me explain what i have done so far before explaining what i need:

I’ll have some fields that’ll be dinamically generated depending on the number a user selects in a interval. So let’s say he wants to be notified 3 times a day, so it’ll be 3 datetimes, but i have to automatically set a value for the newly generated .
Because i have others fields alongside with the i’m creating a object and pushing the numbers of datetimes. so i have this:

MY .TS FILE:

alterFrequency(val) {
    //using moment js
    let hour= Moment().add(1, 'h');
    this.timesSet= [];

    for (var i = 0; i < valor; i++) {
        if (i == 0) {
            this.timesSet.push({
                hour: hour.format('YYYY-MM-DDTHH:mm'),
                qtd: 1
            })
        } else {
            hour.add((24 / valor), 'h');
            this.timesSet.push({
                hora: hour.format('YYYY-MM-DDTHH:mm'),
                qtd: 1
            })
        }
    }
}

MY HTML:

<ion-item style="margin-bottom: 3%">
            <ion-select [(ngModel)]="frequenciaDrop" okText="Ok" cancelText="Cancelar" placeholder="Escolher..." (ionChange)="alterFrequency(frequenciaDrop)">
                <ion-option value="1">1 time a day</ion-option>
                <ion-option value="2">2 times per day</ion-option>
                <ion-option value="3">3 times per day</ion-option>
                <ion-option value="4">4 timer per day</ion-option>
            </ion-select>
        </ion-item>
        <ion-grid>
            <ion-row *ngFor="let t of timesSet, let ind = index">
                <ion-col>
                    <ion-item>
                        <ion-datetime displayFormat="HH:mm" pickerFormat="HH mm" doneText="Ok" cancelText="Cancelar" [(ngModel)]="**HERE IS THE PROBLEM**"></ion-datetime>
                    </ion-item>
                </ion-col>
                <ion-col>
                    <div>
                        <input type="number" min="0" value="{{t.qtd}}" />
                    </div>
                </ion-col>
            </ion-row>
        </ion-grid>

So what i need to do is bind the generated to the object.hour property so if the user need to alter the hour, it changes the property value. Even if i use (ionChange) to change the value in the object, i also need to show an recommended hour when the datetime is generated.

How can i do this with [(ngModel)]?
Is there a simpler or another way to do this?

Thanks everyone. :slight_smile:


#2

I’ve stared at your question for a while but I still don’t understand it, because your code is missing the key part, and you aren’t saying what incorrect behavior your attempts are showing. I can say a few things in general though.

  1. You’re using a comma instead of a semicolon inside your ngFor. That isn’t in the Angular documentation, though perhaps it’s supported anyway, I don’t know. I’d fix that first.

  2. Double-binding inside ngFor spooks me, even though it’s legal, because of performance issues. If you know for sure you’ll never go over 4, probably you’re fine. But you might want to test the page on an old device and see how fast things are. I personally consider it to be an Angular antipattern, though I might just be paranoid.

  3. I use FormBuilder for almost everything, and avoid ngModel unless the situation is super simple (much simpler than what you are describing). I have no proof I’m right, but the intuition I’ve developed is that (a) I almost never need two-way binding, not really; and (b) FormBuilder gives me more fine-grained control, so it’s a better foundation in case I want to add complexity to a page later. Also © I can always add double-binding for a particular property by hand, so to speak, with [property]= and (property)=.


#3

there were a couple of errors in your code, but i think it got it working for you… see this plnkr

http://embed.plnkr.co/S4OvLbEoZpPglUGuBhbM/