输入类型="number" 不适用于 angular 表单
Input type="number" not working in angular form
我有以下代码
<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 文件,这似乎有效,而且我能够在所有字段中输入。但不是在使用 angular.
时
Angular 组件 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() {
}
}
从 @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() {
}
}
不工作到底是什么意思?我刚刚尝试在 fiddle 中执行您的代码。
它工作正常。
在 chrome 中它不接受字符。
在 firefox 中它确实接受字符,但将其标记为无效。
https://github.com/angular/material2/issues/4941
所以这是一个真正的初学者错误。番茄钟组件显然显示在另一个组件之上,这就是输入字段无法正常工作的原因。我使用 css 更改了位置,现在可以使用了。
我有以下代码
<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 文件,这似乎有效,而且我能够在所有字段中输入。但不是在使用 angular.
时Angular 组件 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() {
}
}
从 @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() {
}
}
不工作到底是什么意思?我刚刚尝试在 fiddle 中执行您的代码。 它工作正常。 在 chrome 中它不接受字符。 在 firefox 中它确实接受字符,但将其标记为无效。 https://github.com/angular/material2/issues/4941
所以这是一个真正的初学者错误。番茄钟组件显然显示在另一个组件之上,这就是输入字段无法正常工作的原因。我使用 css 更改了位置,现在可以使用了。