Html 如何在angular 6项目中使用sweetalert2的InputValidator？

我想做以下事情：

呼叫合并

如你所见，我这里有一个按钮和东西。当用户按下按钮时，会出现一个带有文本框的窗口。此文本字段必须至少包含3个字符，否则用户将看到来自sweetalert的错误消息

问题是：Angular编译器对

inputValidator

不满意。编译器总是说

inputValidator

的lambda表达式中缺少括号。但是，如果我删除

inputValidator

，代码就会正常工作

我还尝试分别定义swal组件，例如

具有验证功能

验证（事件）{
console.log（'It works'）；
返回新承诺（（解决）=>{
如果（event.length>=3）{
解决（）；
}否则{
解析（'说明应至少包含3个字符！'）
}
});
}

用这个按钮的代码

呼叫合并

在这种情况下，sweetalert窗口显示正确，但验证程序不工作。由于某种原因，

validate（…）

函数未执行

我还试图定义函数

merge（）{
游泳({
标题：“你确定吗？”，
输入：“文本”，
inputPlaceholder:'请在''中键入说明，
键入：“警告”，
showCancelButton:true，
confirmButtonText:'是'，
cancelButtonText:“取消”，
confirmButtonClass:'btn btn primary'，
cancelButtonClass:'btn btn大纲主'，
inputValidator：（值）=>{
返回新承诺（（解决）=>{
如果（value.length>=3）{
解决（）；
}否则{
解析（'说明应至少包含3个字符！'）
}
});
}
});
}

然后我在按下按钮时调用这个函数

呼叫合并

在本例中，除了

.css

类之外，其他一切都运行良好。显示必要的错误消息，但Angular编译器显然没有看到

.ts

文件中定义的任何

.css

类。因此，sweetalet窗口显示标准的

.css

类

---

强制输入验证程序正常工作的最简单方法是什么？

我解决了以下问题：

在我的

.ts

文件中：

从'@toverux/ngx-sweetalert2'导入{SwalComponent}；
...
@ViewChild（'mergeDialogSwal'）私有mergeDialogSwal:SwalComponent；
...
mergeDialogValidator（）：void{
如果（this.mergeDialogSwal==未定义）{return；}
this.mergeDialogSwal.inputValidator=（值）=>{
返回新承诺（（解决）=>{
如果（value.length>=3）{
解决（）；
}否则{
解析（'说明应至少包含3个字符！'）；
}
});
};
}

在我的

.html

文件中：

...
点击我

也许这个解决方案不太好，但我没有其他想法。如果有人能提出更好的解决方案，我会很高兴

Stackblitz:

在组件html中

呼叫合并

组件内ts

---

请为您的代码创建一个stackblitz。完成：在app.component.html中，删除从第25行到第35行的所有内容。我在文件中留下了这个inputValidator代码，以表明编译器缺少一些括号。只有连接到第三个键的代码才能工作。但是，这里只使用.css标准类。我的项目使用自己的.css类，这些类作为节点模块包含。

public mergeSwalValidator(value: string): string | null {
    if (value.length >= 3) {
          return null;
    } else {
          return 'The description should be at least 3 characters!';
    }
}