question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong variable type on type="number" ngModel binding

See original GitHub issue

Which @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:closed
  • Created a year ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
aceArt-GmbHcommented, Sep 21, 2022

image

1reaction
jessicajaniukcommented, Sep 19, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found