Setting the input field value through jQuery does the required validation on AngularJS

Question

I have an input field marked as required, a validation message is displayed if the user touches the field but does not provide a value or if the form is submitted. It works great.

If I programmatically set a value in a field (e.g. using jQuery), the required message is shown. Here is my code

<form
    name="myForm"
    novalidate>
    <input
        id="myField"
        name="myField"
        ng-model="myField"
        type="text"
        required />
    <br />
    <div
        ng-messages="myForm.myField.$error"
        ng-if="myForm.myField.$touched || myForm.$submitted">
        <div ng-message="required">Required field</div>
    </div>
    <br />
    <input
        type="submit"
        value="Send" />
</form>

<script>
    $(function() {
        $('#myField').val("this is a value");
    });

    var app = angular.module('app', [ 'ngMessages' ]);

    app.controller('MyCtrl', function MainCtrl() {
    });
</script>

The generated html code for the input field shows the following classes:

<input id="myField" name="myField" ng-model="myField" type="text" required="" class="ng-pristine ng-invalid ng-invalid-required ng-touched">

I would create a tablet or violinist for this, but I could not connect the Angular message module.

Answer 1

this works for me:

$scope.$apply(function(){
  $scope.myForm.myField.$setValidity("required", true);
});

Angular 1.3.14