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

Question

堆栈闪电战

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

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

你有什么建议吗？

---

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

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

---

更新 2

在this和that的帮助下，我找到了一个可行的解决方案。

仍然缺乏的一件事：

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

标签： angularformstypescriptvalidation

Answer 1

更改以下几行并检查

输入错误状态匹配器-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) {

输入错误状态匹配器-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