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

• killerString在第一个位置需要一个数字
• string1+string2+killerstring的组合长度需要小于15（例如）
• 我试图从角度来源“复制/调整”

  模式

  验证器

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

你有什么建议吗

---

在赛义德的帮助下我接近了。。。它非常粗糙，我确信当您使用my

customLength

validator有多个字段时，它不起作用：

---

更新2 我在和的帮助下找到了一个

还有一件事仍然缺乏：

• 当string1或string2被“更改”时，这不会在

  killerInput

  中触发验证

---

更改以下行并检查

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

从

到

const total\u name=customLength.arr？customLength.arr.join（“”）：“”；
if（总长度

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

从

到

现在，如果3个文本框字符的长度组合超过15，则会出现错误

我已经在stackblitz中更新了我的代码。检查这里

---

更改以下行并检查

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

从

到

const total\u name=customLength.arr？customLength.arr.join（“”）：“”；
if（总长度

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

从

到

现在，如果3个文本框字符的长度组合超过15，则会出现错误

我已经在stackblitz中更新了我的代码。检查这里

---

根据您更新的帖子，您需要监听指令中的@Input更改。这可以通过

ngChanges

和

registerOnValidatorChange

完成，这将帮助您注册回调函数，以便在验证器输入更改时调用

killerInput类可以使用模板变量、ngClass和某些样式进行设置：

HTML：

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

CSS

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

---

您可以查看文章。

根据您更新的帖子，您需要监听指令中的@Input更改。可以使用

ngChanges

和

registerOnValidatorChange

来完成此操作，这将帮助您注册回调函数，以便在验证器输入更改时调用

killerInput类可以使用模板变量、ngClass和某些样式进行设置：

HTML：

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

CSS

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

---

你可以查看文章。

你能帮我转出stackblitz吗？转出stackblitz，在你的本地试试首先谢谢：但我不能让它工作：

killerstring:1ccc

不应该给出错误。但是它会…你对所有3个文本框的值是什么？你的stackblitz与我的第二次尝试类似。但是它有相同的问题。

1.

在第一次从无效更改为有效时不显示有效。（请检查控制台以了解此信息。），

2.

使用一个全局变量，在多个位置使用该指令时肯定会产生副作用。你能用我的stackblitz吗？用stackblitz，在你的本地试试首先谢谢：但我无法让它工作：

killerstring:1ccc

不应该给出错误。但它确实…你对所有3个变量的值是什么文本框？您的stackblitz与我的第二次尝试类似。但是它有相同的问题。

1。

在第一次从无效更改为有效时不显示有效。（请检查控制台以了解此情况。），

2.

使用一个全局变量，在多个位置使用该指令时肯定会产生副作用。非常感谢：）我很高兴它能帮上忙！\o/非常感谢：）我很高兴它能帮上忙！\o/

  <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();
    }
  }

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