我创建了一个角度为5的输入数字分量
我的应用程序中有很多输入数字
当我想使用键盘中的向上和向下箭头键增加或减少输入值时,它不起作用。
这是我的代码:
<div class="field" [ngClass]="{'error': (_input.hasError('required') &&
_input.dirty)||_input.hasError('min')||_input.hasError('max')||(step &&
_input.value % step !== 0 && _input.value % step >0)}">
<label>
{{label}}
<i class="warning" *ngIf="warning">
({{warning}})
</i>
</label>
<div [ngClass]="{'ui right labeled input':inputLabel}">
<input autocomplete="off" id="name" [attr.disabled]="!disabled ? '' : null"
min="min" max="max" type="number" [formControl]="_input" (focus)="focus=true"
(focusout)="focus=false" step="step"
popupHeader="نکته" popupText=" حداقل عدد وارد شده باید min و حداکثر max
باشد" popupTrigger="focus">
<div *ngIf="inputLabel" [ngClass]="{'focus':focus && _input.valid}" class="ui
basic label">
{{inputLabel}}
</div>
</div>
<div *ngIf="step && _input.value % step >0 " class="ui basic red below
pointing prompt label transition visible">فرمت {{label}} اشتباه است .
</div>
<app-validation-message [variable]="_input" [require]="true" [arrow]="arrow"
message="لطفا {{label}} را وارد کنید"></app-validation-message>
<app-validation-message *ngIf="_input.hasError('min')" [variable]="_input"
[require]="false" [arrow]="arrow" message=" حداقل {{label}} باید {{min}}
{{inputLabel}} باشد "></app-validation-message>
<app-validation-message *ngIf="_input.hasError('max')" [variable]="_input"
[require]="false" [arrow]="arrow" message=" حداکثر {{label}} باید {{max}}
{{inputLabel}} باشد "></app-validation-message>
<app-validation-message *ngIf="_input.value % step > 0" [variable]="_input"
[require]="false" [arrow]="arrow" message=" فرمت {{label}} اشتباه است . ">
</app-validation-message>
</div>
这是我的ts代码:
import { Component, OnInit,Input } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-input-number',
templateUrl: './input-number.component.html',
styleUrls: ['./input-number.component.css']
})
export class InputNumberComponent implements OnInit {
@Input() fieldWide:string;
@Input() label:string;
@Input() placeholder:string;
@Input() _input:FormControl;
@Input() arrow:string;
@Input() required:boolean;
@Input() inputLabel:string;
@Input() name:string;
@Input() min:number;
@Input() max:number;
@Input() step:number;
@Input() disabled:boolean=true;
@Input() warning:string;
focus:boolean=false;
constructor() { }
ngOnInit() {
}
}
当要使用向上向下箭头键增加数字时,它不起作用 注意:它可以在chrome上运行,但是我在Firefox中有问题