NG-Required not working on search input fields

Question

I have a text box that is a search box (input type ="search") that I want to use the ng-required directive on it as needed.

The issue is if I set ng-required = true there is no red box around my textbox. If I change the input type = "text" it works correctly but then I do not get my x to clear out data.

How can I modify the input type="search" so that it sees the required flag and changes the textbox to red?

Answer 1

ng-required and required should work for regardless of input type.
Take a look at here. You can change the input type and see the message true for both cases.

function SearchCtrl($scope) {
  $scope.postBtn = function() {
     debugger;
      if($scope.searchForm.$invalid) {
        console.log($scope.searchForm.$invalid);
        return;
      }
    }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="SearchCtrl">
   <form name="searchForm">
     <input type="search" name="search" ng-model="search" required/>
     <div ng-messages="searchForm.search.$error">
        <p ng-message="required">This field is required.</p>
    </div>
     <input type="button" ng-click="postBtn()" name="Submit" value="submit" />
   </form>
</div>