Question

STACKBLITZ

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

我如何有一个customValidator附加“动态数据”信息。输入中没有“挂钩”，我可以在其中附加“动态数据”

您有什么建议吗？

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

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

更新2

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

仍然缺少的一件事：

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

Answer 1

更改以下行并检查

input-error-state-matcher-example.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

Answer 2

根据更新后的帖子，您需要侦听指令中@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文章。

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

更新2

2 个答案: