Javascript 角度-模板驱动表单-控制器中的自定义验证器函数

由于在ngModel中使用反应式表单是非常困难的，而且我的项目在很大程度上依赖于使用ngModel，所以我决定用模板驱动的表单替换我的反应式表单

在我这样做之前，我想确保所有与反应式表单相关的事情都与模板驱动表单相关

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

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

有了反应形式，我可以做这样的事情：

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中的反应式表单示例：

---

你可以用两种方法来做

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

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

并在TS文件中进行验证

2） 在相应字段中使用（ngModelChange）。如果要在smallerValue字段中进行验证，请在那里或在biggerNumber值中使用它。i、 e:

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

输入时传递值并验证它们

我想要第二个

---

希望这有帮助。

您可以使用angular自定义验证库

比如你有课

class MyClass {

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

}

注意这里的@ValueRange（{min:1，max:10，错误：'value应该是1到10'}）。它是aspnet mvc模型中使用的一种数据注释。这个图书馆有这样的功能。 在模板驱动表单中使用此选项

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

[（ngModel）]=“model.id”
name=“id”

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

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

数据类型、信用卡、包含、比较、名称、必需、必需、必需、模式、最小值、，

---

MaxValue、NotContains、StringLength、电子邮件、自定义、NoForm、ReadOnly、ValueRange

抱歉，这不是我要找的。您的方法只是常规的事件处理程序，但我需要使用接受抽象控制参数的验证器函数。谢谢，但这并不是我想要的