I have implemented a SharePoint client-side people picker in my form using the directive from this GitHub repository. However, I am facing an issue where the validation of my form fails and the button remains disabled. When I remove the field, the validation works fine, but I do need to include it.
Here is the code for my button:
<button type="button" data-ng-disabled="myForm.$invalid" data-ng-click="save()" class="btn btn-default form-control">SAVE ONLY</button>
And here is how I'm using the directive:
<sp-people-picker name="CC" id="CC" ng-model="vm.cc" min-entries="1" max-entries="20" allow-duplicates="false" show-login="false" show-title="true" min-characters="2" app-web-url="$scope.spAppWebUrl" />
I'm puzzled as to why this directive-controlled field is causing validation to fail, resulting in the button staying disabled. It seems like Angular is unable to detect the field for validation purposes.
UPDATE: Setting the field's ng-required attribute to "false" enables the button, but if I clear the values from the people picker, the button goes back to being disabled, even though the field is not marked as required!