angular 2 ngModel parse error with Elvis operator

Question

I am trying to do two way binding in AngularJs and I got this error:

Parser Error: The '?.' operator cannot be used in the assignment at column 48 in [data.insObj.static['AHV,IV,EO']?.employerShare=$event]

My ngModel looks like this:

[(ngModel)]="data.insObj.static['AHV,IV,EO']?.employerShare"

How can I fix this?

UPDATE

I have this code

<input type="text" class="form-control"
                       id="employerShare"
                       name="data.insObj.static['AHV,IV,EO'].employerShare"
                       placeholder="5.125%"
                       [ngModel]="data.insObj.stat['AHV,IV,EO']?.employerShare"
                       (ngModelChange)="data.insObj.static['AHV,IV,EO'].employerShare = $event">

when I change the input field, it raises an error of

Cannot read property 'AHV,IV,EO' of undefined

I am converting this from an object to an array from the component like this

this.data.insObj.stat = response.body.static;
this.data.insObj.stat = this.convertObj(response.body.static);

and my function that converts it to array looks like this:

public convertObj(obj) {

    var custObj = [];
    var array = $.map(obj, function (value, index) {
        custObj[index] = value;
    });

    return custObj;
}

can you help me out in here, why is falling down in ngModelChange

"static": {
  "AHV,IV,EO": {
    "id": 19,
    "employerShare": "0.05125",
    "employeeShare": "0.05125",
    "numberOfCompensationFound": "123.456",
    "insuranceNumber": "278.12312.123.456",
    "insuranceName": null,
    "man": null,
    "woman": null,
    "customerNumber": null,
    "subNumber": null,
    "contractNumber": null,
    "upperLimit": null,
    "isSuva": null,
    "dateOfContribution": "2017-03-02T08:30:01.095Z",
    "yearOfContribution": 2017,
    "createdAt": "2017-03-02T08:30:01.095Z",
    "updatedAt": "2017-03-06T11:02:22.323Z",
    "insuranceContributionHeaderId": 11,
    "companyId": 12,
    "insuranceContributionHeader.id": 11,
    "insuranceContributionHeader.insuranceName": "AHV,IV,EO",
    "insuranceContributionHeader.isFixed": true
  },

than it will show me ngModel of undefined :s – Mar 02 '17 at 13:43 — , Mar 02 '17 at 13:43

score 11 · Accepted Answer · edited May 06 '21 at 17:46

11

You need to split the two-way-binding to one data and one event binding:

[ngModel]="data?.insObj?.static && data.insObj.static['AHV,IV,EO']?.employerShare" 
(ngModelChange)="data.insObj.static['AHV,IV,EO'] && data.insObj.static['AHV,IV,EO'].employerShare = $event"

edited May 06 '21 at 17:46

Cuga

17,668
31
111
166

answered Mar 02 '17 at 13:50

Günter Zöchbauer

623,577
216
2,003
1,567

I got an error my friend in Webstorm it says Must be lvalue – Mar 02 '17 at 13:57
here I uploaded a photo – Mar 02 '17 at 14:02
I guess it's related to `data.insObj.static['AHV,IV,EO'].employerShare`. You can try in code if `data.insObj.static['AHV,IV,EO'].employerShare = 'abc'` works (where `'abc'` is a valid value for `employerShare`) See also http://stackoverflow.com/questions/17930948/error-c2106-left-operand-must-be-l-value – Günter Zöchbauer Mar 02 '17 at 14:02
I cannot fix this yet :( – Mar 02 '17 at 14:48
Have you tried in code first, instead of in a template binding? I can't help because I have no idea what's behind `data.insObj.static['AHV,IV,EO'].employerShare` – Günter Zöchbauer Mar 02 '17 at 14:49
You can try to reproduce the problem in a Plunker. Plunker provides a ready-to-use Angular2 template. – Günter Zöchbauer Mar 02 '17 at 14:54
thank you my friend, that was a good fix, but now when I change the input field, I got another error, here I updated the question can you assist me a little bit more. Thanks a lot of the support – Mar 06 '17 at 15:16
Sorry, no idea how I should help you. I can't tell from the provided information what `data`, `insObj`, `static`, `AHV,IV,EO` or `emplyerShare` could be. – Günter Zöchbauer Mar 06 '17 at 15:28
I updated my answer. When you get the data async you also need to guard `data.insObj.static`. Because `[]` doesn't support `?[]`, you need the more complex `data?.insObj?.static && ...` – Günter Zöchbauer Mar 06 '17 at 15:36
nope still falls for Cannot read property 'AHV,IV,EO' of undefined – Mar 06 '17 at 15:40
try `['static']` instead of `.static` everywhere in the template – Günter Zöchbauer Mar 06 '17 at 15:40
1

your answer is correct, sorry my bad my friend I had changed the .static to stat, because static was a reserved word. Thank you for the help, god bless you – Mar 06 '17 at 15:43
1

anyway gunter I have to mention that, your old answer was correct like this: [ngModel]="data.insObj.stat['AHV,IV,EO']?.employerShare" (ngModelChange)="data.insObj.stat['AHV,IV,EO'] && data.insObj.stat['AHV,IV,EO'].employerShare = $event" – Mar 06 '17 at 15:49

score 6 · Answer 2 · answered Mar 02 '17 at 13:45

6

Try using *ngIf on input:

<input type="text" *ngIf="employerShare in data.insObj.static['AHV,IV,EO']" [(ngModel)]="data.insObj.static['AHV,IV,EO'].employerShare"

answered Mar 02 '17 at 13:45

Ledzz

1,266
1
12
14

Can't bind to 'ngIfIn' since it isn't a known property of 'input' – Mar 02 '17 at 13:48
1

You need to add `CommonModule` to `imports: [...]` of your module – Günter Zöchbauer Mar 02 '17 at 13:49
Thanks you so much, you save my day ;) In my code: – bravohex Jun 09 '17 at 03:24

angular 2 ngModel parse error with Elvis operator

2 Answers2