angularjshtmlvalidationng-messages

Angularjs Form Validation with ng-pattern


I'm using ng-pattern to validate a field and display a message when it does not match a specific pattern using ng-messages. The issue I have is the form has a next button which is being disabled/enabled with ng-diabled"form.$invalid" so when the input is invalid the form is then invalid.

What I would like to achieve is to display a message with ng-message when ng-pattern is not matched but not set the form to invalid. Essentially I'm trying to provide a hint that the text input by the user might not be valid whilst not preventing the form from being submitted.


Solution

  • From what i can understand , you are using ng-disabled this means you want to disable button when form is invalid but for some specific condition you just want to show error message but not invalidate form

    If that's the case just add a watcher for that ng-model value in your controller and toggle a variable to show or hide that error message

    $scope.$watch('email', function() {
      if (email == 'abx@xyz.com') {
        flag = true;
      }
      else {
        flag = false;
      }
    })
    

    Note this is for specific case only, Avoid using watchers it slows down your app