ng-required with angular ui-ace

Question

How would you implement ng-required together with angular ui-ace in a form?

This is my markup:

<form name="scriptform">
    <div name="script"
         ui-ace="{ onLoad: configureAce }"
         ng-required=""
         ng-model="someCodez">
    </div>
</form>

{{ scriptform }}

Out of the box it seems ace is not hooking up to the angular form validation framework, since the {{ scriptform }} above is not printing out any form validation errors when 'someCodez' is null.

Answer 1

Glancing at the docs, I think the ng-required attribute only works together with the <input> element, so this approach might not be possible.

However, you can achieve similar results by changing the $setValidity of the form component itself. For example, when a user is no longer changing content in the Ace Editor:

$scope.configureAce = function() {
  return {
    onLoad: function (editor) {
      editor.on('blur', function() {
        if (/* test validity of someCodez */)
          $scope.scriptForm.script.$setValidity('scriptSyntax', true);
        else
          $scope.scriptForm.script.$setValidity('scriptSyntax', false);
        $scope.$digest();
      });
    }
  };
};

The first parameter to $setValidity is a custom string you can check for and f.e. use to display the error state to the user. See related docs: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController