Input type="number" not working in angular form


I have the following code

<div class="container">
    <div class="form-group">
        <input type="number" class="form-control" id="hours" name="hours" 

        <label for="hours">hr</label>

    <div class="form-group">
        <input type="number" class="form-control" id="minutes" name="minutes" 

        <label for="minutes">min</label>

    <div class="form-group">
        <input type="number" class="form-control" id="seconds" name="seconds" 

        <label for="seconds">sec</label>

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';

  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() {



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 By – anushka

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.