Nativescript Raddataform 中的禁用按钮答案

【问题标题】：Disable button in Nativescript RaddataformNativescript Raddataform 中的禁用按钮
【发布时间】：2020-01-14 07:55:30
【问题描述】：

我正在使用 commitMode="Immediate" 并且尝试在任何输入无效时禁用我的保存按钮。实现这一目标的推荐方法是什么？

我知道在我的组件中使用“手动”模式时我可以只设置一个变量，但我找不到任何表示使用时最好是完整的 Raddataform（否则单个属性）的有效性发生变化的事件立即验证。

【问题讨论】：

您可以监听propertyValidated事件并检查整个表单是否有任何错误（可能使用.hasValidationErrors()），如果有任何错误，请禁用按钮。
这意味着我需要在所有属性上分别添加该事件，对吧？
不，这意味着您可以使用 RadDataForm 上的事件，该事件在验证属性时触发。这是表单中所有属性的共同事件。
好的，那是一个不错的解决方案，谢谢！
嗯....hasValidationErrors() 似乎正在触发propertyValidated，导致堆栈溢出。知道为什么或如何解决它吗？

标签： nativescript nativescript-angular

【解决方案1】：

您可以通过监听验证事件然后更新您的模型来做到这一点。

从this example，添加propertyValidated 监听器：

<RadDataForm @propertyValidated="onPropertyValidated"  ...></RadDataForm>

然后改变你的状态：

methods: {
  onPropertyValidated({ object, propertyName, entityProperty }) {
    this.$refs.button.enabled = !entityProperty.isValid;
  }
}

在这种情况下，您可能希望跟踪所有验证，或者您可以使用完整的 dataform.hasValidationErrors()。

【讨论】：

【解决方案2】：

这是 NS-Vue 解决方案，但完全适用于 Angular。

添加在每次验证时触发的@propertyValidated="onValidateForm" 事件侦听器。然后您可以在表单上使用hasValidationErrors() 来查看表单是否有效。唯一的窍门是它必须被包裹在 setTimeout() 中，就像这样：

onValidateForm(event) {
    setTimeout(() => {
        this.validated = !event.object.hasValidationErrors();
        console.log("form valid: " + this.validated);
    }, 100);
}

如需完整解决方案，请参阅this playground。

【讨论】：