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

Posted 2023-03-13

【中文标题】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

【讨论】：

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