Disable button in Nativescript Raddataform

Question

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.

You may listen to `propertyValidated` event and check if the entire form has any errors (may be using `.hasValidationErrors()`) and disable the button if there is any. — Manoj, Jan 14 '20 at 17:52
That means that I need to add that event on all properties separately, right? — Norbert Huurnink, Jan 14 '20 at 18:39
No, that means you can use the event on RadDataForm that's triggered whenever a property is validated. It's a common event for all properties in form. — Manoj, Jan 14 '20 at 18:55
Hum... `.hasValidationErrors()` seems to be triggering `propertyValidated`, causing a stackoverfow. Any idea why or how to get around it? — Tiago A., May 14 '20 at 10:30
Figured it out. adding a setTimeout in the event handler works! — Tiago A., May 14 '20 at 10:51

score 0 · Answer 1 · answered May 14 '20 at 15:34

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().

score 0 · Answer 2 · answered May 14 '20 at 16:10

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.

Disable button in Nativescript Raddataform

2 Answers2

Linked