上向下箭头键在输入类型编号中不起作用?

时间:2018-10-16 05:48:24

标签: angular angular5

我创建了一个角度为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中有问题

0 个答案:

没有答案