Angular 6 验证数字输入 [英] Angular 6 validate number input

问题描述

我有一个输入，类型是数字.我想设置最小值和最大值，如果输入超出此范围(<最小值或>最大值)，则会显示错误.

我的问题是，如果输入不为空而是无效，则错误消失(例如:min = 10，max = 20，input = 2000，仍然没有错误显示).

我在这个网站上搜索，有一篇关于验证的帖子，但解决方案是使用 <md-input-container> 和 .我不想使用 <md-input-container> 和 .

参考:此处

有没有办法解决我的问题?

我的 add-hero.component.html:

<label>出版年份:</label><input type="number" id="PublishedYear" name="PublishedYear" required min="10" max="20"[(ngModel)]="hero.PublishedYear" #publishedYear="ngModel"><p class="alert alert-danger invalid" *ngIf="publishedYear.errors">发布年份无效</p>

我的英雄.ts

导出类英雄{身份证号码;名称:字符串；出版年份:编号；完成?:布尔值；}

解决方案

感谢您在上面的所有回答和您的努力.经过几个小时的研究，我终于得到了答案:页面

如果你和我一样有任何问题，这里就是答案.

我的 .html 文件:

<label for="publishedYear">发布年份:</label><input type="number" id="PublishedYear" formControlName="publishedYear"><div *ngIf="f.publishedYear.errors">出版年份无效

我的 .ts 文件:

import { Component, OnInit, Input } from '@angular/core';从'../Hero'导入{英雄}；从 '../hero.service' 导入 { HeroService };从@angular/router"导入{路由器}；导入 { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from'@角度/表格';@成分({选择器:'app-hero-add',templateUrl: './hero-add.component.html',styleUrls: ['./hero-add.component.css']})导出类 HeroAddComponent 实现 OnInit {英雄:英雄=新英雄()；myForm = new FormGroup({})//实例化我们的表单get f() { 返回 this.myForm.controls;}构造函数(私有 heroService:HeroService，私有路由器:路由器，私有表单生成器:表单生成器){this.myForm = formBuilder.group({发布年份:['', [Validators.min(1990), Validators.max(2018)]]});}ngOnInit() {}}

I have an input and the type is number. I want to set min and max, if the input is out of this range (< min or >max), the error will be displayed.

My problem is that if the input is not empty but invalid, the error disappears (example: min =10, max =20, input =2000, still no error displays).

I search on this site and there is a post about validation but the solution is to use < md-input-container> and < md-error>. I don't want to use < md-input-container> and < md-error>.

Reference:here

Is there anyway to solve my problem?

My add-hero.component.html:

<div class="publishedYear">
<label>Publish Year: </label>
<input type="number" id="PublishedYear" name="PublishedYear" required min="10" max="20" 
[(ngModel)]="hero.PublishedYear" #publishedYear="ngModel">
<p class="alert alert-danger invalid" *ngIf="publishedYear.errors">Invalid Published Year</p>
</div>

My Hero.ts

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

解决方案

Thanks for all of your answers above and your efforts. After a few hours doing research, I finally got an answer from this : page

If you have any problem like me, here is the answer.

My .html file:

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

My .ts file:

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

这篇关于Angular 6 验证数字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！