Question

由于将响应式表单与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

Answer 1

您可以通过2种方式来实现。

1）您可以在按钮单击事件上使用验证功能，并在未通过条件时引发错误。

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

并在您的TS文件中进行验证。

2）在各个字段中使用（ngModelChange）。如果您想在smallValue字段中进行验证，请在其中使用它，或者在bigNumber值中进行验证。即：

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

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

我希望第二个。

希望这会有所帮助。

Answer 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：'值应该从1到10'}）。这是在ASPNET MVC模型中使用的一种数据注释。这个库做这样的事情。在您的模板驱动表单中使用

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

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

总共有以下自定义验证功能：

DataType，CreditCard，包含，比较，名称，必填，RequiredIf，Pattern，MinValue， MaxValue，NotContains，StringLength，电子邮件，自定义，NoForm，ReadOnly，ValueRange

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

2 个答案: