在Nativescript Raddataform中禁用按钮

Question

我正在使用commitMode =“ Immediate”，并且当任何输入无效时，我试图禁用我的保存按钮。建议采用什么方法来实现这一目标？

我了解，我只能在组件中使用“手动”模式时设置一个变量，但是当使用“立即数”时，我找不到任何代表有效性变化的事件，最好是完整的Raddataform（否则为单个属性）验证。

Answer 1

您可以通过侦听验证事件，然后更新模型来执行此操作。

从this example，添加propertyValidated侦听器：

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

然后更改您的状态：

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

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

Answer 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。