如何在模板驱动的angular中验证最小值(年龄)？
在模板驱动的Angular中，可以使用Angular Forms来验证最小值（年龄）。以下是一种实现方式：
- 首先，在组件的HTML模板中，使用
ngModel指令将输入框与组件中的属性绑定起来。例如，将输入框与age属性绑定：<input type="number" [(ngModel)]="age" name="age">。 - 在组件的类中，定义
age属性，并使用@ViewChild装饰器获取到输入框的引用。例如：@ViewChild('ageInput') ageInput: ElementRef;。 - 在组件的类中，使用
ngAfterViewInit生命周期钩子函数来获取输入框的引用后，可以使用this.ageInput.nativeElement来访问输入框的DOM元素。 - 在组件的类中，使用
Validators类提供的静态方法来创建验证器。例如，使用Validators.min(18)来创建一个最小值为18的验证器。 - 在组件的类中，创建一个
FormGroup对象，并在其中定义一个FormControl对象来表示年龄输入框。将之前创建的验证器传递给FormControl的第二个参数。例如：ageControl = new FormControl('', Validators.min(18));。 - 在组件的类中，将
FormControl对象添加到FormGroup对象中。例如：form = new FormGroup({ age: this.ageControl });。 - 在组件的HTML模板中，使用
form对象来绑定表单，并显示验证错误信息。例如：<form [formGroup]="form"> <input type="number" [(ngModel)]="age" name="age" #ageInput="ngModel" required> <div *ngIf="ageInput.invalid && (ageInput.dirty || ageInput.touched)"> <div *ngIf="ageInput.errors.required">年龄是必填项。</div> <div *ngIf="ageInput.errors.min">年龄不能小于18岁。</div> </div> </form>。
这样，当用户输入的年龄小于18岁时，输入框下方会显示相应的错误信息。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
验证可以工作，但是当输入错误大约为min/max时，我总是得到与所需的相同的错误消息。
另一个问题是，只有当我第一次单击输入外部时才会显示错误消息。
component.ts
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormControl, Validators, FormBuilder, FormGroup} from '@angular/forms';
export class myClass implements OnInit {
浏览 1提问于2017-08-04得票数 1
回答已采纳
md-在我的输入中不触发最小/最大的错误。不过，它是为“必需”而工作的。
我在MaterialModule的NgModule中导入了app.module.ts。
Html:
<div class="form-group">
<md-input-container>
<input mdInput id="useramount"
name="useramount"
typ
浏览 1提问于2017-07-17得票数 1
1回答
输入控制有问题，如果我输入501 (无效值)，除非输入失去焦点，否则不会显示mat错误。当用户输入无效的值而不丢失焦点时，如何显示它？这是html
<div class="col-auto form margin-top-17 margin-left-10" [formGroup]="activationPointsFormGroup">
<mat-form-field style="width:230px!important">
<input matInput
浏览 0提问于2018-03-20得票数 2
回答已采纳
我一直在努力使用反应式表单对单选按钮进行数据绑定。
我的html文件如下所示
<form [formGroup]="newserviceform" (ngSubmit)="AddNewServices()" class="form" novalidate>
<div class=" form-group row">
<div class="col-sm-3 col-xs-12">
<p class="model-input-lables
浏览 2提问于2020-03-08得票数 0
我正在尝试验证表单中的密码和ConfirmPassword字段是否相同，但是当我在SO上添加其他帖子提供的验证时(除了将ControlGroup更改为FormGroup之外)，我总是得到
错误:找不到具有未指定名称属性的控件
但是，当我不使用下面的"matchingPassword“组进行验证，而只是使用Validators.required语法时，它工作得很好。
我不知道为什么它会抛出这个错误。还有没有人做过这方面的工作？我目前正在Angular 4 Distro上建造。
constructor(
private accountService: accountService,
fb:
浏览 0提问于2017-05-17得票数 1
1回答
我正在尝试创建一个动态字段，其中包含一个add按钮，一个delete按钮和Address类。我不明白为什么addAddress函数不能工作。我四处寻找解决办法，但我找过的东西都没有用。我是一个有角度的新手，所以我可能会使这件事变得比需要的更复杂。这是app.component.ts
import { FormGroup, FormControl, FormArray, FormBuilder } from
'@angular/forms';
import { Component, OnInit } from '@angular/core';
import
浏览 4提问于2017-07-14得票数 3
回答已采纳
3回答
我是新的角，在我的形式，我有三个字段名称，电子邮件和无线电部分。我的要求是：
当我选择“名称”单选按钮名称时，需要输入字段。
当我选择电子邮件单选按钮时，电子邮件输入字段是必需的。
我试过了但没有结果。如何实现此要求？
.html：
<form class="example-form" [formGroup]="emailForm">
<!-- Name -->
<mat-form-field class="example-full-width">
<in
浏览 0提问于2018-11-01得票数 2
1回答
我正在为角度4的Udemy课程进行挑战，但是我被困在一个挑战中，我必须为一个新密码创建一个输入，然后创建另一个输入，以使用反应性表单来确认新的密码。
我有一个名为.ts的外部password.validators.ts文件，它具有自定义表单验证代码，我可以通过传递带有AbstractControl的控件对象来获取当前选定的输入框的值，但是如何将值传递给component.ts文件，然后从password.validators.ts component.ts传递到password.validators.ts？我需要能够比较新的密码值和确认密码值，我被卡住了！
new-password.compo
浏览 2提问于2017-10-20得票数 2
我想编辑一个产品，并在更新产品之前显示详细信息。我已经开发了一个表单以及相关的组件和服务，但是我在我的角4应用程序中得到了一个错误消息ERROR TypeError: Cannot read property 'product_name' of undefined。我在“update-Product.Component.html”中编写了以下内容：
<div class="container">
<form [formGroup]="productUpdateForm" (ngSubmit)="updateprodu
浏览 0提问于2018-04-02得票数 1
回答已采纳
我有一个自定义验证器来计算2个控制器值；totalDisch应该比damaNumb更多
组件文件：
form = new FormGroup({
hospital: new FormControl({ value: '', disabled: true }, Validators.required),
department: new FormControl('', Validators.required),
damaDt: new FormControl('', Validators.required),
d
浏览 4提问于2017-11-25得票数 0
最小和最大范围验证:验证错误显示在两个文本字段中而不是编辑文本字段，我在angular中使用了reactive forms/formGroups，但我找不到一种仅在编辑测试框中显示错误消息的方法
我已经尝试过使用keyup事件(虽然是查找编辑输入field0
class CrossFieldErrorMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return co
浏览 0提问于2019-09-07得票数 0
我相信我的setErrors函数不能工作，因为value控件的值是product.component.ts ngAfterViewInit() {
this.isPriceErrorSub = this.store.select(getCreateProductsError(this.index, 'isPriceError')).subscribe(err => {
console.log(err);
if(err) {
this.eurosFormControl.setErrors({ backend: true
浏览 29提问于2021-09-22得票数 0
升级到RC5后，我们开始收到以下错误：
ngModel cannot be used to register form controls with a parent formGroup
directive.
Try using formGroup's partner directive "formControlName" instead. Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
浏览 10提问于2016-08-24得票数 106
1回答
我正在使用ReactiveFormModule创建编辑表单。我想以编辑的形式显示数据，如文本框、下拉列表、radiobox和复选框。我可以使用setValue方法成功地设置文本框和下拉列表的值。但是我不能用相同的值来设置无线电组的值。
类型标
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, FormControlName } from '@angular/fo
浏览 0提问于2018-08-05得票数 1
我对angular 7非常陌生，我创建了一个from来添加新教师，它包含不同的字段，每个字段都有验证，我有一个文件
add-teacher.component.ts
它包含了添加教师的所有逻辑和验证，但是，我想创建一个不同的验证文件，这样以后我就可以使用这个验证文件来验证了，现在我正在用这种方式验证：
add-teacher.component.ts
@Component({
selector: 'app-add-teacher',
templateUrl: './add-teacher.component.html',
styleUrls: [&#
浏览 1提问于2020-04-30得票数 0
在我缓慢地寻求理解，角度等，我有一个错误，从我的可视化工作室代码编辑器，似乎不影响应用程序的功能。
当我悬停在Html模板中的一个变量上时，我收到了这个弹出窗口
我的html模板充满了与产品对象product.ETC相关的错误.
有人能为我指明正确的方向来理解如何破译这个。
product-form.component.html
<div class="row">
<div class="col-md-6">
<form #form="ngForm" (ngSubmit)="sav
浏览 4提问于2017-11-23得票数 5
回答已采纳
问题是，
我尝试用angularJS v2为密码和电子邮件字段构建一个“自定义验证器”。按照“标准结构”，我确实让这些文件交互在一起：
/forms/form.component.ts
/validators/password.validator.ts
/validators/email.validator.ts
在我的表单组件模板中，我介绍了以下两个相关字段：
//...
<input type="password" class="form-control" placeholder="password" [(ngModel)]="
浏览 4提问于2016-12-13得票数 2
回答已采纳
我正在尝试实现一个自定义验证器，以检查密码和密码确认是否相等。问题是验证器正在获取未定义的密码和confirmedPassword参数。我该怎么做呢。该函数可以工作，因为如果我将条件改为===而不是!==，则当字段相同时，它将正确抛出错误。有人知道这里的错误是哪一个吗？
signup.component.html
<div class="col-md-7 col-md-offset-1 col-sm-7">
<div class="block">
<div class="well">
浏览 7提问于2017-06-09得票数 48
回答已采纳
2回答
我刚开始时是Angular dev。我尝试创建简单的表单，其中一些输入字段依赖于其他字段。下面是我的模板： <form [formGroup]="betingForkForm" novalidate>
<fieldset formGroupName="requredField">
<div class="form-group" [ngClass]="{
'correct':startingValue.valid && (starti
浏览 27提问于2020-06-19得票数 0
回答已采纳
我试图在我们的应用程序中实现棱角材料步进功能。基于文档，我提出了以下解决方案：
civilliability-proposal-detail.component.html
<form [formGroup]="formGroup">
<mat-horizontal-stepper labelPosition="bottom" formArrayName="formArray" #stepper>
<mat-step formGroupName="0" [stepControl]="
浏览 1提问于2019-03-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
