具有动态输入的模板驱动表单的高级自定义验证器答案

【问题标题】：advanced custom validator for template driven form with dynamic input具有动态输入的模板驱动表单的高级自定义验证器
【发布时间】：2019-08-20 13:41:44
【问题描述】：

STACKBLITZ

killerString 需要一个数字在第一个位置
string1 + string2 + killerstring 的组合长度需要小于 15（例如）
我尝试从角度来源“复制/改编”pattern 验证器。

我怎样才能拥有一个附加了“动态数据”信息的 customValidator。输入中没有“挂钩”，我可以在其中附加我的“动态数据”

你有什么建议吗？

在 Syed 的帮助下，我接近了……它非常 hacky，我确信当您使用我的 customLength 验证器有多个字段时它不起作用：

https://stackblitz.com/edit/angular-4cvomu-zjlht5

更新 2

在this 和that 的帮助下，我找到了WORKING SOLUTION。

还有一点欠缺：

当 string1 或 string2 “更改”时，这不会触发 killerInput 中的验证...

【问题讨论】：

标签： angular forms typescript validation

【解决方案1】：

根据您更新的帖子，您需要监听指令中的@Input 更改。可以使用ngChanges 和registerOnValidatorChange 来完成，这将帮助您注册回调函数以在验证器输入更改时调用。

killerInput 类可以用模板变量、ngClass 和一些样式来设置：

HTML：

  <input matInput #myInput=ngModel [ngClass]="{'error-class': myInput.invalid}" ....">

指令

.....

  private _onChange: () => void;

  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }

  ngOnChanges(changes: SimpleChanges): void {

    if ('customLength' in changes) {
      if (this._onChange) this._onChange();
    }
  }

CSS

.error-class{
  border: 2px solid  red
}

DEMO

您可以查看this的文章。

【讨论】：

非常感谢 :) 我很高兴它可以提供帮助！ \o/

【解决方案2】：

更改以下行并检查

输入错误状态匹配器示例.ts

来自

const total_name = customLength.arr.join();

if (total_name.length > customLength.maxLength) {

到

const total_name = customLength.arr?customLength.arr.join(''):'';

if (total_name.length < customLength.maxLength) {

input-error-state-matcher-example.html

来自

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2], maxLength: 15}">

到

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2, killerstring], maxLength: 15}">

如果 3 个文本框字符的长度组合超过 15 个长度，现在您将收到错误消息。

我在 stackblitz 中更新了我的代码。看这里

https://stackblitz.com/edit/angular-4cvomu-7jpviu

【讨论】：

你能分叉我的 stackblitz 吗？
在 stackblitz 中分叉，在本地尝试
首先谢谢你：但我不能让它工作：killerstring: 1ccc 不应该给出错误。但它确实......
3 个文本框的值是多少？
您的 stackblitz 与我的第二次尝试类似。然而它也有同样的问题。 1. 在第一次从无效变为有效时不显示有效。（检查控制台。），2. 使用单个全局变量，在多个地方使用该指令时肯定会产生副作用。