NgModel convert model to string, when input[type] doesn't number.

[rocketberg]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When input[type="text"] ngModel convert model to string.

Expected behavior

If model is number or something else, it should be save its type

Minimal reproduction of the problem with instructions

Logic

class Foo {
	public bar = {
		foo: 42
	}

	onFocusOut(): void {
		console.log (typeof bar.foo) //string
	}
}

Template

<input type="text" [(ngModel)]="bar.foo" (blur)="onFocusOut()">

What is the motivation / use case for changing the behavior?

Backend returns value and Frontend need to do something with that, then update that one at Backend side. On condition if type of that value didn't change backend will update that one.

Ok i can convert that value at the logic side, but if i don't know about type changed. Or don't want to excess actions with type converting.

Environment

Angular version: 4.4.3


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[about-code]

I think it works as intended. If your data-bound model property is a number just use type="number" to avoid string coercion.

[lazarljubenovic]

It has to return string because you cannot map a string back to a custom data structure. This is true even for numbers.

(+0).toString() // '0'
(-0).toString() // '0'

[rocketberg]

@lazarljubenovic of course!
And i will explain more this problem. Look at gifs.

[rocketberg]

@lazarljubenovic as you can see above. When input[type="number"] i get in console type number.
But if input[type="text"] i have string type in my console.

I think it's not good. Because NgModel convert my type to string

[trotyl]

Likely it should just throw at first place when value past is not string, so there won't be any consistency problem.

[rocketberg]

@trotyl thank you for the answer.
So if it's not consistency problem for all. I think i will resolve this.

[trotyl]

Relates to #16952, currently binding for ngModel does not have proper type checking due to its mechanism.

[lazarljubenovic]

When input[type="number"] i get in console type number. But if input[type="text"] i have string type in my console.

Of course, that's why there is number and text (string). Whatever you bind to [type=text] will be converted to a string, and you'll get the stringified value back on changes.

@trotyl suggests an interesting solution, but I wonder how many apps that will "break".

[rocketberg]

@lazarljubenovic why do you think that?
I think ngModel shouldn't change type of value, that's all.
For example you put as a model {foo: true} ngModel will keep this as type boolean always.

[trotyl]

NgModel didn't change the type at all. It just updates the value to whatever emitted by change event.

There is no two-way binding mechanism in Angular, just a syntax sugar for normal property binding and event binding, neither of them are special.

[lazarljubenovic]

@haacki47 It cannot keep the type if you serialize it to a string to show in an input field and then let user update that field.

[kara]

As others have mentioned, it's expected behavior that changes to a text field would produce a string value. If you'd like to convert the string to a different type, a custom control value accessor or a number field are both viable options.