Question

我有一个输入，类型是数字。我要设置最小值和最大值，如果输入超出此范围（<最小值或>最大值），将显示错误。

我的问题是，如果输入不是空但无效，则错误消失（例如：min = 10，max = 20，input = 2000，仍然没有错误显示）。

我在此站点上搜索，并且有关于验证的帖子，但是解决方案是使用和。我不想使用和。

参考：here

总有办法解决我的问题吗？

我的add-hero.component.html：

export class Hero {
Id: number;
Name: string;
PublishedYear: number;
Complete?: boolean;
}

我的Hero.ts

QueryableState

Answer 1

使用输入类型=“数字”设置时的解决方案，当用户使用滚动条增加或减少数字时，最小和最大设置将停止。但是当用户直接在文本中输入数字时，不会显示任何错误

要做到这一点，有2个解决方案

1）使用角度表单验证将表单控件添加到您的输入中，将会有一些在线示例

2）在文本框更改或单击按钮时调用函数，以验证用户输入的数字与ts文件中的表达式匹配。

您需要使用表单验证

myForm = new FormGroup({}) // Instantiating our form

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder.
  this.myForm = fb.group({
    // Adding the "myNum" input to our FormGroup along with its min-max Validators.
    'myNum': ['', [Validators.min(5), Validators.max(10)]] 
  })
}

和html

 <form [formGroup]="myForm"> <!-- Binding myForm to the form in the template -->

      <label for="myNum">Some Val</label>
      <!-- formControlName binds our myNum field declared in the ts code. -->
      <input type='number' id="myNum" formControlName="myNum">
    <div *ngIf="myForm.controls['myNum'].hasError('max')">
      Minimum required number is 15.
</div> 
    </form>

Answer 2

See the sample code in stackblitz

before_install

将两个指令都添加到声明中。这应该适用于模板驱动的表单

Answer 3

在html和ts文件中使用代码

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
// validate the value here
}

Answer 4

感谢您的上述所有回答和您的努力。经过几个小时的研究，最终我得到了一个答案：page

如果您有像我这样的问题，这就是答案。

我的.html文件：

<form [formGroup]="myForm">
<label for="publishedYear">Publish Year: </label>
<input type="number" id="PublishedYear" formControlName="publishedYear">
<div *ngIf="f.publishedYear.errors">
  Invalid Published Year
</div>

我的.ts文件：

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../Hero';
import { HeroService } from '../hero.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from 
'@angular/forms';

@Component({
selector: 'app-hero-add',
templateUrl: './hero-add.component.html',
styleUrls: ['./hero-add.component.css']
})
export class HeroAddComponent implements OnInit {

hero: Hero = new Hero();

myForm = new FormGroup({}) // Instantiating our form

get f() { return this.myForm.controls; }

constructor(private heroService: HeroService, private router: Router, private 
formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({     
    publishedYear: ['', [Validators.min(1990), Validators.max(2018)]]
});
}

  ngOnInit() {
  }     
}

Answer 5

以模板驱动形式处理最小最大验证的最简单方法是使用html的pattern属性，并为其指定一个正则表达式编号，例如输入范围为0-24的

<input pattern="([0-9]|1[0-9]|2[0-4])" required type="number" id="monday" name="monday" [(ngModel)]="pullingStrategy.one" #monday="ngModel" />

因此，如果该值不在范围内，则表单将无效如果您想为任何其他范围生成正则表达式编号，请使用此链接http://gamon.webfactional.com/regexnumericrangegenerator/

Angular 6验证数字输入

5 个答案: