如何在Angular中使用模板驱动的表单验证数字字段？
在Angular中使用模板驱动的表单验证数字字段，可以通过以下步骤实现：
- 在组件的HTML模板中，使用
ngForm指令创建一个表单，并使用ngModel指令绑定数字字段的值。例如：
<form #myForm="ngForm">
<input type="number" name="myNumber" ngModel>
<button type="submit">Submit</button>
</form>- 在组件的类中，使用
@ViewChild装饰器获取表单的引用，并定义一个方法来处理表单的提交。例如：
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@ViewChild('myForm') myForm: NgForm;
onSubmit() {
if (this.myForm.valid) {
// 表单验证通过，执行提交操作
console.log(this.myForm.value.myNumber);
}
}
}- 在模板中，可以使用
ngModel指令的属性来进行数字字段的验证。例如，可以使用required属性来验证字段是否为空，使用min和max属性来验证字段的最小值和最大值。例如：
<form #myForm="ngForm">
<input type="number" name="myNumber" ngModel required min="0" max="100">
<div *ngIf="myForm.controls.myNumber.invalid && (myForm.controls.myNumber.dirty || myForm.controls.myNumber.touched)">
<div *ngIf="myForm.controls.myNumber.errors.required">
数字字段不能为空
</div>
<div *ngIf="myForm.controls.myNumber.errors.min">
数字字段不能小于0
</div>
<div *ngIf="myForm.controls.myNumber.errors.max">
数字字段不能大于100
</div>
</div>
<button type="submit">Submit</button>
</form>在上述代码中，使用ngIf指令根据表单字段的验证状态来显示相应的错误信息。
总结：
在Angular中，使用模板驱动的表单验证数字字段可以通过ngForm指令、ngModel指令和相应的属性来实现。通过设置required、min、max等属性，可以对数字字段进行必填、最小值、最大值等验证。在组件类中，可以使用@ViewChild装饰器获取表单的引用，并定义一个方法来处理表单的提交。腾讯云提供的相关产品和产品介绍链接地址可以参考腾讯云官方文档或咨询腾讯云官方客服。
相关·内容
3回答
在角度模板驱动的表单中提交时显示表单验证错误
angular、angular5
我已经在Angular中创建了模板驱动的表单。
<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched
浏览 30提问于2018-06-08得票数 2
2回答
使用angular 2进行动态表单验证
javascript、html、validation、angular、angular2-forms
我在angular 2应用程序上工作，并在一个小节模板中动态创建表单域(使用json)。
我想在表单无效时禁用提交按钮。
<h1>Form Validation</h1>
<div >
<form #loginForm="ngForm">
<subsection [question]="fieldsData"></subsection>
<button type="submit" [disabled]="!loginForm.form.val
浏览 4提问于2017-03-16得票数 2
4回答
角- NgForm - FormControl未定义
angular、angular-forms
我有一个页面，其中有一个简单的NgForm表单，在加载页面/视图之后，我试图禁用特定的字段。
但我得到了一个未定义的例外：
错误TypeError:无法读取未定义的属性“禁用”
component.ts代码：
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'sub',
templateUrl:
浏览 0提问于2019-04-10得票数 1
回答已采纳
3回答
角形:提交事件和点击事件有什么不同？
angular
我想知道表单提交事件和按钮单击事件来执行http post操作有什么不同。
表格提交示例：
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
按钮单击示例：
<f
浏览 0提问于2019-03-08得票数 1
回答已采纳
1回答
无法在Angular4中提交克隆元素
angular、angular2-template、clonenode
我有一个带有两个字段( for.eg名称和年龄)的模板，需要克隆并附加到同一个容器中。我使用以下代码实现了这一点。
html文件
<ng-template #tpl>
<div class="form-group">
<input type="text" id="name" class="form-control" name="name" ngModel
#name="ngModel">
<input type="text" id=
浏览 2提问于2017-10-20得票数 2
1回答
角2+中输入字段数组的验证
angular、typescript、angular-forms、angular-template-form
I有一个角形式，它包含一个输入字段，然后是一个输入字段数组。我需要验证这些字段中的任何一个都不是空的。
单个字段运行良好，但我很难验证字段数组，当表单显示时，我得到了一个错误Error: Cannot assign to a reference or variable!。有什么办法可以解决这个问题吗？
@Component({
selector: 'my-app',
template: `
<form #f="ngForm" name="form" (ngSubmit)="ok(f.form)" novali
浏览 0提问于2018-08-09得票数 1
回答已采纳
2回答
Angular 2-提交表单时NgForm为空
angular
大家好，我正在用Angular做一个"dinamic“表单，我在获取表单中输入的值时遇到了一些问题，我的代码是：
HTML
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" *ngFor="let con of controls" novalidate>
<div class="form-group" *ngIf = "con.type != 'submit'">
<label for=
浏览 0提问于2017-07-08得票数 0
2回答
Angular 5表单未验证并提交
angular、angular5
我想通过Angular 5提交一个小表单。表单中有一个文件上传域。在.ts文件中，我导入了ngForm，如下所示
import { NgForm } from '@angular/forms';
出于测试目的，我只是在表单提交方法中放置了一个控制台文本，如下所示：
onSubmit(form : NgForm) {
console.log("form submitted !");
}
html视图中的表单如下所示：
<form method="post" (ngSubmit)="mydocumentFrm.form.valid
浏览 13提问于2018-09-07得票数 0
1回答
触摸角形时隐藏消息
angular、forms、validation
我使用的是角6，我有以下形式
<form (ngSubmit)="onFormSubmit(myForm)" #myForm="ngForm">
first name <input type="text" autofocus id="firstname" required [(ngModel)]="firstname" name="firstname" #firstnameValidityMsg="ngModel" >
<div
浏览 2提问于2018-07-04得票数 1
回答已采纳
3回答
比较两个输入字段的值，以便通过模板验证在角7中的形式。
angular、typescript、angular-validation
我在转到角7的头几周，我在我的项目中使用基于模板的基本验证来完成基本表单，但是我现在需要验证表单，基于这样一个字段的值必须高于另一个字段
我尝试在组件控制器中使用值本身，但是虽然我能够确认这些值是否有效，但我无法使用以下代码向用户展示问题所在
if (issueThresholdForm.value.lowScore > issueThresholdForm.value.highScore) {
// Show user error
// This is the messing part, I guess
}
下面是我使用的模板
<div *ngIf="_issue
浏览 5提问于2019-09-29得票数 2
回答已采纳
2回答
反应形式提交状态
angular、angular-reactive-forms、formgroups
我想知道是否有任何方法来检索反应形式的“提交”状态。
使用模板驱动的表单，您可以通过‘FormGroupDirective’访问ngForm，如下所示
<form #form='ngForm' (ngOnSubmit)="handleSubmit()">
<p *ngIf="form.invalid && form.submitted">Invalid</p>
<button type="submit">Submit</button>
&l
浏览 1提问于2020-03-30得票数 3
回答已采纳
3回答
尽管Angular中的表单重置，输入字段仍被标记为红色
angular、forms、validation、input、frontend
我遇到了这个问题，我有一个带有输入验证的表单，其中包含一个reset按钮，当单击该按钮时，应该重置表单，从而重置输入字段的状态以及提交状态。输入字段被清除，但是它们被标记为红色，因为一个验证标准是输入字段不应为空。有没有人能解释一下为什么会发生这种情况，或者更好的解决方法。
提前感谢！
import { Component, OnInit } from "@angular/core";
import { NgForm } from "@angular/forms";
@Component({
selector: "app-contact"
浏览 2提问于2020-04-21得票数 4
1回答
角形在组件中没有控件。
angular、angular-forms
在组件中访问时，我的窗体没有控件：
下面是表单(注意"name“属性)：
<form #finaliseForm="ngForm"
fxLayout="column"
fxFlex>
<div fxLayout="row">
<div fxLayout="column"
fxFlex="50"
class="cb-
浏览 2提问于2021-11-11得票数 0
6回答
在角4中如何有条件地要求形状输入？
forms、angular、validation
我使用模板驱动的表单来添加任务，并且有两个类型为多少的输入字段供估计的mins来完成任务，
一个字段用于估计小时数和
另一个是完成任务所需的估计分钟。
由于任务估计可以在1小时这样的小时内完成，也可以在1小时30分钟的时间内完成，所以我希望有条件地将属性required设置为inputs。因此，在提交表单时，如果两个输入都是空的，则必须设置这两个输入中的一个，否则将出现表单验证错误。
到目前为止，我已经这样做了，但是验证不起作用。
<form class="add-task" (ngSubmit)="onSubmit(newtask)" #
浏览 7提问于2017-08-04得票数 24
20回答
角2决赛中的最小/最大变压器
validation、angular、typescript、angular2-forms
根据，当前支持的验证器是：
必填项
最小长度
最大长度
模式
因此，考虑到以下代码()：
@Component({
selector: 'my-app',
template: `
<form #formRef="ngForm">
<input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
<input typ
浏览 8提问于2016-10-04得票数 59
回答已采纳
1回答
在这个用例中，ngModel指令究竟是如何工作的？
angular、angular-directive、angular-ngmodel
我是一个完全的角度初学者，我对NgModel指令及其可能的用例有一些概念上的怀疑。
阅读角官方文档：
我只能读到：
从域模型创建FormControl实例，并将其绑定到窗体控件元素。
在我看来，这个FormControl应该是一个对象，它保存插入到表单字段和相关字段状态中的值(例如，对于验证文档)。这是正确的吗？现在，我对具体的用例有了一些怀疑。
那么，让我们举一个例子。
我有一张表格：
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<div class="form-gr
浏览 6提问于2020-05-06得票数 1
回答已采纳
1回答
如何添加[禁用]=‘！f.valid’提交按钮使用ng-内容在角4？
forms、angular、angular2-ngcontent
有一个表单组件，其中包含电子邮件、密码字段和提交按钮通过ng-内容，这样就可以显示登录表单' login‘按钮，并显示注册表单’寄存器‘按钮。表单组件模板代码：
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
c
浏览 4提问于2017-09-11得票数 0
回答已采纳
2回答
为什么在empForm.reset()之后；所需的字段标记为无效错误？
angular、forms、reset
我在学习角形。这里是一个简单的表单，它包含ename/job.sal字段，ename/job是必需的。在提交之前，当我输入值时，验证器工作得很好，而clear函数也很好地擦除了填充的文本。但是，在我单击submit (调用empForm.reset())后，所需的字段标记为红色无效字段错误，清除按钮也不能删除红色，我认为这是不合理的行为。我只想在提交后，所有的字段都保持原来没有失败的验证红色标记。如何做到这一点，谢谢。
谢谢和问候，马丁。
<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
浏览 4提问于2020-04-11得票数 1
回答已采纳
1回答
使用Angular 4从父组件检查表单是否有效
angular、typescript
我正在尝试检查放置在父组件的子组件上的表单的有效性。最好的方案是在窗体无效的情况下禁用父组件上的按钮，或者在最坏的情况下，如果窗体无效，则从父按钮触发警报。
我可以使用@ViewChild装饰器调用子组件上的函数来检查表单是否有来自父组件的“ng-invalid”类，如下所示：
父组件：
export class CandidateVerificationComponent implements OnChanges, OnInit {
@ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;
saveAn
浏览 1提问于2017-07-06得票数 7
回答已采纳
6回答
使用验证将表单划分为多个组件
angular、typescript、angular-forms
我想要创建一个带有角2的大表单，但是我想用多个组件创建这个表单，如下例所示。
应用程序组件
<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
<address></address>
</div>
<div>
<input type="text" ngModel required/>
</div>
<input type="submit" [d
浏览 5提问于2017-04-07得票数 79
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
