正文 

当前位置： 首页 > 源码 >

Angular 2 模板驱动的表单组验证

     2023-02-21     259

关键词：

【中文标题】Angular 2 模板驱动的表单组验证【英文标题】：Angular 2 template driven form group validation 【发布时间】：2017-06-27 07:57:15 【问题描述】：

我有一个关于 angular 2 模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，我希望能够向用户显示警告。

例如，假设我有以下表格：

<form class="form" #f="ngForm" (submit)="submit()">
    <div class="form-group">
       <input type="text" name="firstName" required [(ngModel)]="user.firstName">
       <input type="text" name="lastName" required [(ngModel)]="user.lastName">
    </div>
    <div class="form-group">
        <input type="text name="address" required [(ngModel)]="user.address">
    </div>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

如果 firstName 和/或 lastName 无效，我希望包含输入“firstName”和输入“lastName”的整个表单组进行更改。我知道我可以做这样的事情：

<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid">
   <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
   <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>

它会工作得很好。但这里是棘手的部分：在这个例子中，我只有两个输入和一个简单的验证规则，所以它很容易检查并且仍然可读。但是，如果我有 10 个输入来检查表单组怎么办？我不想最终不得不手动检查每个输入的有效性。

我找到的一个解决方案是在第一个子表单中创建一个子表单：

<form class="form" #f="ngForm" (submit)="submit()">
    <form #subForm="ngForm" [class.has-error]="!subForm.valid">
       <input type="text" name="firstName" required [(ngModel)]="user.firstName">
       <input type="text" name="lastName" required [(ngModel)]="user.lastName">
    </form>
    <div class="form-group">
        <input type="text name="address" required [(ngModel)]="user.address">
    </div>
    <button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button>
</form>

这是我创建的一个 plunker 来说明： form validation example

但是我觉得很丑，我强行检查了这两个表格，看看有没有问题。所以最后我的问题是：我可以将 div 设置为 2 ngForm 角度以便能够一次验证多个输入吗？基本上有没有比创建子表单更好的方法来执行这种验证？比如类似的东西：

<div class="form-group" #names [class.has-error]="!names.valid">
   <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
   <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>

PS：我知道使用函数是另一种解决方案，但它具有相同的缺点：您必须手动检查每个输入，这取决于验证规则，这可能会变得非常棘手，而且您正在失去使用的优势之一模板驱动的表单而不是响应式表单。

【问题讨论】：

一个plunker真的很有帮助。 我刚刚添加了一个 plunker 来说明我在说什么，希望对您有所帮助:) 有关信息，form 元素嵌套在另一个 form is invalid HTML and XHTML 【参考方案1】：

是的，您可以为此使用 ngModelGroup 指令。

<form class="form" #f="ngForm" novalidate>

  <div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid">
    <input type="text" class="form-control" name="firstName"
            [(ngModel)]="user.firstName"
            placeholder="first name"
            required>

    <input type="text" class="form-control" name="lastName"
            [(ngModel)]="user.lastName"
            placeholder="last name"
            required>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" name="address"
            [(ngModel)]="user.address"
            placeholder="address"
            required>
  </div>

  <button class="btn btn-primary" [disabled]="!f.valid">Submit</button>

</form>

【讨论】：

这正是我想要的！非常感谢:) !f.valid 可以是f.invalid

异步验证器不适用于 Angular 中的模板驱动表单

】异步验证器不适用于Angular中的模板驱动表单【英文标题】：AsyncValidatornotworkingwithTemplatedrivenFormsinAngular【发布时间】：2017-10-1801:31:52【问题描述】：我为我的模板驱动表单创建了一个异步验证器。importDirective,forwardReffrom"@angular... 查看详情

angular自定义验证器添加入模板驱动表单

创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

Angular 2.0 中的模型驱动表单验证问题

】Angular2.0中的模型驱动表单验证问题【英文标题】：ModeldrivenformvalidationissueinAngular2.0【发布时间】：2017-09-1700:10:49【问题描述】：在Angular2.0中，我有使用FormBuilder的模型驱动表单，ngOnInit()this.user=this.fb.group(id:[\'\',[Validators.require... 查看详情

带有 ngFor 输入的 Angular 2 模板驱动表单

】带有ngFor输入的Angular2模板驱动表单【英文标题】：Angular2templatedrivenformwithngForinputs【发布时间】：2017-01-2915:48:06【问题描述】：是否可以在模板驱动的表单中使用ngFor创建输入字段，并使用#name="ngModel"之类的东西来在另一个标... 查看详情

Angular 2中的模板驱动形式和反应形式有啥区别

】Angular2中的模板驱动形式和反应形式有啥区别【英文标题】：Whatarethedifferencesbetweentemplatedrivenformsandreactiveformsinangular2Angular2中的模板驱动形式和反应形式有什么区别【发布时间】：2017-12-2920:03:27【问题描述】：在Angular2中，模... 查看详情

模板驱动表单中的表单验证问题

...【发布时间】：2019-04-1612:03:09【问题描述】：我正在使用Angular6开发一个Web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如：CustomComponent.ts（打字稿）@Component(selector:\'custom-component\',templ 查看详情

验证模板表单中的复选框列表（不是反应式表单）Angular 2

】验证模板表单中的复选框列表（不是反应式表单）Angular2【英文标题】：ValidationofCheckboxlistinTemplateform(notReactiveforms)Angular2【发布时间】：2018-01-2320:25:15【问题描述】：如何验证是否从Angular2模板表单中的复选框列表中选择了至... 查看详情

angular表单的使用实例

...单的创建//1、在根模块注入依赖模块import{FormsModule}from‘@angular/forms‘;//2、在模板中创建表单控 查看详情

表单提交后Angular 2显示验证错误

】表单提交后Angular2显示验证错误【英文标题】：Angular2displayvalidationerrorsafterformsubmit【发布时间】：2016-03-1011:26:09【问题描述】：我正在构建一个模型驱动的Angular2表单。我发现的大多数示例都会禁用提交按钮，直到表单有效。... 查看详情

Angular 2阻止输入以模板驱动的形式提交

】Angular2阻止输入以模板驱动的形式提交【英文标题】：Angular2prevententerfromsubmittingintemplate-drivenform【发布时间】：2017-03-3122:16:14【问题描述】：我有使用模板驱动蓝图的表单，所以是这样的：<form#myForm="ngForm"ngSubmit="save(myForm.va... 查看详情

Angular2嵌套模板驱动表单

】Angular2嵌套模板驱动表单【英文标题】：Angular2nestedtemplatedrivenform【发布时间】：2017-01-0714:35:25【问题描述】：这简直是疯了，看起来没有办法让其中一个输入位于子组件中的表单。我已经阅读了所有的博客和教程以及所有内... 查看详情

如何在 Angular 中将此模板驱动的表单更改为反应式表单？

】如何在Angular中将此模板驱动的表单更改为反应式表单？【英文标题】：HowtochangethistemplatedrivenformtoReactiveforminAngular?【发布时间】：2022-01-2309:43:36【问题描述】：如何将此模板驱动的表单更改为响应式表单？我想将此模板驱动... 查看详情

angular2+折腾记：初步了解表单：模板驱动及数据驱动及脱坑要点

...块引入这两个模块；import{FormsModule,ReactiveFormsModule}from‘@angular/forms‘;表单控件响应的几种状态模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule一般做表单校验及操作推荐用数据驱 查看详情

如何根据 Angular 2 中的自定义验证规则显示错误消息？

】如何根据Angular2中的自定义验证规则显示错误消息？【英文标题】：HowtodisplayerrormessagebasedoncustomvalidationrulesinAngular2?【发布时间】：2016-11-2817:59:35【问题描述】：我正在使用模板驱动的方法在Angular2中构建表单，并且我已经成... 查看详情

Angular 5 - 表单验证电子邮件

】Angular5-表单验证电子邮件【英文标题】：Angular5-formvalidatione-mail【发布时间】：2018-08-1709:10:14【问题描述】：我想解决这个问题：Angular5-模板驱动表单输入字段的类型为电子邮件。示例：<inputtype="email"[(ngModel)]="model.email"#email... 查看详情

Angular2 模板驱动的异步验证器

】Angular2模板驱动的异步验证器【英文标题】：Angular2templatedrivenasyncvalidator【发布时间】：2016-07-1402:59:42【问题描述】：我在以模板驱动形式定义异步验证器时遇到问题。目前我有这个输入：<inputtype="text"ngControl="email"[(ngModel)]=... 查看详情

Angular 5模板驱动表单单元测试-无法读取未定义的属性“表单”

】Angular5模板驱动表单单元测试-无法读取未定义的属性“表单”【英文标题】：Angular5templatedrivenformunitTest-Cannotreadproperty\'form\'ofundefined【发布时间】：2019-02-2320:14:54【问题描述】：您好，我是测试新手。我尝试了很多来测试一个... 查看详情