Wrong variable type on type="number" ngModel binding
See original GitHub issueWhich @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
having a [(ngModel)]
bind of string variable to an <input>
with type="number"
does change the run time type/does not complain about the wrong type.
Even with "fullTemplateTypeCheck": true
, "strictTemplates": true,
and "strict": true,
@Component({
selector: 'my-app',
styleUrls: ['./app.component.css'],
template: `
<input type="number" [(ngModel)]="myStringVar">
<br>
{{ getTypeOfMyStringVar() }}
`,
})
export class AppComponent {
myStringVar: string;
getTypeOfMyStringVar(): string {
return typeof this.myStringVar;
}
}
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-v9mgc7?file=src%2Fapp%2Fapp.component.ts
Please provide the exception or error you saw
No exception or error was thrown, yet the type did change from declared string to number
Please provide the environment you discovered this bug in (run ng version
)
Angular CLI: 13.3.8
Node: 18.7.0 (Unsupported)
Package Manager: npm 8.12.2
OS: linux x64
Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1303.9
@angular-devkit/build-angular 13.3.9
@angular-devkit/core 13.3.9
@angular-devkit/schematics 13.3.8
@angular/cdk 13.3.9
@angular/cli 13.3.8
@angular/flex-layout 13.0.0-beta.38
@angular/material 13.3.9
@angular/material-moment-adapter 13.3.9
@schematics/angular 13.3.8
rxjs 6.6.7
typescript 4.6.4
as well as the linked StackBlitz with Angular 14
Anything else?
No response
Issue Analytics
- State:
- Created a year ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Changing value bind to ng-model doesn't ... - Stack Overflow
I have an input text box which use ngModel bind to a variable inside the component class. Upon clicking a button I want...
Read more >Two-way binding - Angular
For two-way data binding to work, the @Output() property must use the pattern, inputChange , where input is the name of the @Input()...
Read more >cannot bind ngmodel since it isn't a known property of input
In order to use two-way data binding for form inputs you need to import the FormsModule ... <p> WidthLength : <input type="number" min="1"...
Read more >Form Input Bindings - Vue.js
When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript....
Read more >Angular—Can't Bind to ngModel, Not a Known Property of input
The downside is that you have to use import statements to load the parts your component needs. The only reason that the ngModel...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is currently working as intended.
ngModel
is for template driven forms, and is inherently untyped. Type safety is guaranteed with typed reactive forms, but not with template driven forms.