Input type="number" not working in angular form

Question

I have the following code

<div class="container">
<form>
    <div class="form-group">
        <input type="number" class="form-control" id="hours" name="hours" 
                [(ngModel)]="hours">

                {{hours}}
        <label for="hours">hr</label>
    </div>

    <div class="form-group">
        <input type="number" class="form-control" id="minutes" name="minutes" 
                [(ngModel)]="minutes">

                {{minutes}}
        <label for="minutes">min</label>
    </div>

    <div class="form-group">
        <input type="number" class="form-control" id="seconds" name="seconds" 
                [(ngModel)]="seconds">

                {{seconds}}
        <label for="seconds">sec</label>
    </div>
</form>

For some reason, only the last input is working, and both hour and minutes are not. I checked just the html file, and that seems to work, and I am able to input in all the fields. But not when using angular.

Angular component class

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-pomodoro',
  templateUrl: './pomodoro.component.html',
  styleUrls: ['./pomodoro.component.css']
})
export class PomodoroComponent implements OnInit {
  @Input() private hours: Number;
  @Input() private minutes: Number;
  @Input() private seconds: Number;

  constructor() {

  }

  ngOnInit() {
  }

}

any class member which is used outside of class should have to be public. — Jai
– Jai, Commented Dec 14, 2018 at 6:49

Praveen Gupta · Accepted Answer · 2018-12-14 06:50:09Z

4

Remove private from @Input() property declaration.

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-pomodoro',
      templateUrl: './pomodoro.component.html',
      styleUrls: ['./pomodoro.component.css']
    })
    export class PomodoroComponent implements OnInit {
      @Input() hours: Number;
      @Input() minutes: Number;
      @Input() seconds: Number;

      constructor() {

      }

      ngOnInit() {
      }

    }

answered Dec 14, 2018 at 6:50

Praveen Gupta

2461 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anushka Over a year ago

Did that, but does not seem to help

Swoox Over a year ago

An input can never be private due to that the other component need to access it. Some clarification :) Some people will not upvote cause you put just the answer inside and no explanation why.

Amita Mohite · Accepted Answer · 2018-12-14 07:01:46Z

1

What do you exactly mean by not working ? I just tried executing your code in fiddle. It works fine. In chrome it doesn't accept characters. In firefox it does accept characters, but flags it as invalid. https://github.com/angular/material2/issues/4941

answered Dec 14, 2018 at 7:01

Amita Mohite

759 bronze badges

1 Comment

anushka Over a year ago

Yes it works when used as a normal HTML file, but not when used with as an angular template

anushka · Accepted Answer · 2018-12-14 08:19:10Z

1

So this was a really beginner mistake. The pomodoro component was apparently getting displayed over another component and that is why the input fields weren't working. I changed the position using css and now it works.

answered Dec 14, 2018 at 8:19

anushka

3454 silver badges15 bronze badges

Comments

azizkale · Accepted Answer · 2023-02-22 17:46:24Z

0

I solved it by adding 'any' type in addition to 'number' in myComponent.component.ts file (at param2)

    myFunction(param1: string, param2: any | number, param3: string) {

  }

answered Feb 22, 2023 at 17:46

azizkale

1072 silver badges8 bronze badges

Collectives™ on Stack Overflow

Input type="number" not working in angular form

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related