Disable button in Nativescript Raddataform

问题

I'm using commitMode="Immediate" and I'm trying to disable my save button when any input is invalid. What is the recommended approach to achieve this?

I understand that I can just set a variable when using "manual" mode from my component, but I can't find any event that represents a change in validity of preferably the complete Raddataform (otherwise of a single property) when using Immediate validation.

回答1:

You can do this by listening for validation events and then updating your model.

From this example, add the propertyValidated listener:

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

Then change your state:

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

You will probably want to keep track of all validations in this case, or you could use the complete dataform.hasValidationErrors().

回答2:

This is the NS-Vue solution, but totally applicable in Angular.

Add a @propertyValidated="onValidateForm" event listener that triggers on each validation. Then you can use hasValidationErrors() on the form to see if the form is valid. The only trick is that is has to be wrapped in a setTimeout(), like so:

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

For a complete solution, see this playground.

来源：https://stackoverflow.com/questions/59729520/disable-button-in-nativescript-raddataform