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

关键词：

【中文标题】Angular - 模板驱动的表单 - 控制器中的自定义验证器功能【英文标题】：Angular - Template driven forms - custom validator function in the controller 【发布时间】：2019-03-23 06:30:29 【问题描述】：

由于在 ngModel 中使用响应式表单是 deprecated in Angular 6，并且我的项目在很大程度上依赖于使用 ngModel，因此我决定将我的响应式表单替换为模板驱动的表单。

在我这样做之前，我想确保响应式表单的所有可能的事情都可以通过模板驱动的表单实现。

我需要但找不到任何信息的一件事是在控制器中使用自定义验证器函数和模板驱动的表单。我检查过的所有教程都在为自定义验证器创建单独的指令或做类似的事情。

然而，我确实需要能够在验证器函数中访问控制器中的数据，因为字段的有效性取决于视图中的其他数据和其他属性。同样对于特定的用例，我发现这比为验证器创建单独的文件更有意义。

使用响应式表单，我可以执行以下操作：

this.thisForm = new FormGroup(
      smallerValue: new FormControl('', [
        this.validateSuccessShortName.bind(this) //the validator function
      ]),
      biggerNumber:new FormControl('', [
        Validators.required
      ])
    );
  
  validateSuccessShortName(control: AbstractControl) 
      if (parseInt(control.value,10) > parseInt(this.biggerNumber, 10)) 
        return value: control.value;
      
      return null;
    

但是，对于模板驱动的表单，我找不到执行此操作的方法。

我怎样才能在模板驱动的表单中做这样的事情？

stackblitz 中的响应式表单示例：

https://stackblitz.com/edit/ionic-tqp9o1?embed=1&file=pages/home/home.ts

【问题讨论】：

【参考方案1】：

你可以通过两种方式做到这一点。

1) 您可以在按钮单击事件上使用验证函数，并在条件未通过时抛出错误。

<button type="button" (click)="validateSuccessShortName(smallerValue, biggerNumber)">

并在您的 TS 文件中验证。

2) 在任一字段中使用 (ngModelChange)。如果您想在更小值字段中验证，请在此处使用它或在更大的数字值中。即：

<input type="text" [(ngmodel)]="smallerValue" (ngModelChange)="validateSuccessShortName()"> 

传递您的值并在您输入时验证它们。

我更喜欢第二个。

希望这会有所帮助。

【讨论】：

对不起，这不是我要找的。您的方法只是常规事件处理程序，但我需要使用接受抽象控制参数的验证器函数。【参考方案2】：

您可以使用角度自定义验证库 https://www.npmjs.com/package/ngx-validator

例如你有课

class MyClass 

 @ValueRange(min: 1, max:10, error: 'value should be from 1 to 10')
 id: number;

注意@ValueRange(min: 1, max:10, error: 'value should be from 1 to 10') 这里。它是 aspnet mvc 模型中使用的一种数据注释。这个库做这样的事情。 在模板驱动的表单中使用它

<ngx-input-for 
   [model]="model" > 
   [(ngModel)]="model.id"
   name="id"
</ngx-input-for>   

然后 id 将为您进行所有自定义验证。

总共有以下自定义验证函数：

DataType、CreditCard、Contains、Compare、Name、Required、RequiredIf、Pattern、MinValue、 MaxValue、NotContains、StringLength、电子邮件、自定义、NoForm、ReadOnly、ValueRange

【讨论】：

谢谢，但不是我在这里寻找的东西

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

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

Angular2嵌套模板驱动表单

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

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

】Angular2模板驱动的表单组验证【英文标题】：Angular2templatedrivenformgroupvalidation【发布时间】：2017-06-2707:57:15【问题描述】：我有一个关于angular2模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，... 查看详情

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

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

angular表单的使用实例

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

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

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

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

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

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

】angular2模板驱动的表单验证问题【英文标题】：angular2templatedrivenformvalidationissue【发布时间】：2018-03-0103:32:05【问题描述】：我对angular2模板驱动的表单验证有问题，以下是我的表单的代码。<h1>page_title</h1><div*ngIf="suc... 查看详情

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

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

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

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

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

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

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

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

angular2中的表格

】angular2中的表格【英文标题】：FormsInangular2【发布时间】：2016-03-2420:00:58【问题描述】：对如何在angular2beta中使用表单（模板或模态驱动）有点困惑。目前我正在使用模态驱动的表单，但我的form.html出现了一些错误：<form[ngFo... 查看详情

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

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

reactiveforms

Angular4.x中有两种表单：Template-DrivenForms-模板驱动式表单(类似于AngularJS1.x中的表单)ReactiveForms(Model-DrivenForms)-响应式表单Template-DrivenFormsvsReactiveFormsTemplate-DrivenForms(模板驱动表单)的特点使用方便适用于简单的场景通过[(ngModel)]实现... 查看详情

如何通过模板驱动形式验证 Angular 7 中的下拉列表

】如何通过模板驱动形式验证Angular7中的下拉列表【英文标题】：Howtovalidatedropdowninangular7bytemplatedrivenform【发布时间】：2020-11-1122:14:11【问题描述】：尝试验证下拉选择框但不工作。可能是css问题？那么如何验证它。如果有人知... 查看详情

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

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

Angular 4 - 将对象数组映射到模板中的 ngModel 驱动

】Angular4-将对象数组映射到模板中的ngModel驱动【英文标题】：Angular4-MappingobjectarraytongModelintemplatedrivenfrom【发布时间】：2018-03-2201:17:18【问题描述】：我正在以模板驱动的方式开发一个应用程序。下面是我的项目结构。父母parent... 查看详情