输入类型=“数字”不能以角形式工作

时间:2018-12-14 06:44:49

标签: angular typescript angular2-template angular-forms

我有以下代码

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

由于某种原因,只有最后一个输入有效,而小时和分钟均无效。我只检查了html文件,这似乎可行,并且我能够在所有字段中输入。但是当使用有角度的时候不是。

角度组件类

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

}

3 个答案:

答案 0 :(得分:3)

从@Input()属性声明中删除私有。

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

    }

答案 1 :(得分:1)

您不工作到底是什么意思?我只是尝试在小提琴中执行您的代码。 工作正常。 在chrome中,它不接受字符。 在firefox中,它确实接受字符,但将其标记为无效。 https://github.com/angular/material2/issues/4941

答案 2 :(得分:0)

所以这是一个真正的初学者错误。 pomodoro组件显然显示在另一个组件上,这就是为什么输入字段不起作用的原因。我使用CSS更改了位置,现在可以使用了。