AngularJS / Material - 当用户清除文本输入时重新显示 ng-message

Question

When I load my page (template below) ng-message shows on all text inputs and textareas, then disappears per input when I star typing.

When delete all characters or leave only spaces (which I trim) I want to see my ng-message again but it is gone.

How do I re-display the ng-message on inputs that have no text just like they appear underneath each input element when loading the page for the first time?

---

Controller

angular.module('Action').config([
  '$stateProvider', 
  '$urlRouterProvider', 
  function($stateProvider, $urlRouterProvider) {

  }]).controller('CreateActionController', ['$http', '$resource', '$scope', '$window', '$state', '$timeout', function($http, $resource, $scope, $window, $state, $timeout){


        $scope.actionitem = {
            assignor: '', 
            dueDate: '',
            ecd: '',
            criticality: '',
            owner: '',
            altOwner: '',
            title: '',
            statement: '',
            closurecriteria: ''
        };

        $scope.users = {};
        $scope.usr = {};
        $scope.minDate = null;

        $scope.criticalitylevels = [];   

        $scope.getUsers = function(){
            return $scope.users;  
        };

        $scope.getMinDate = function(){  
            return $scope.minDate;
        }

        $scope.getCrticalities = function(){
            return $scope.criricalitylevels;
        }                       

        $scope.initUsers = function(){    
            return $http.get('api/users').then(function(response){
                $scope.users = response.data;
                return response.data;
            }); 
        } 

        $scope.submit = function(){
            alert(JSON.stringify($scope.actionitem));
            //$http.post('api/actionitem', )
        }

        $scope.today = new Date()

        this.dueDate = new Date();
        this.ecd = new Date();
        this.isOpen = false;

  }]).directive('initData', function(){
          return {
                restrict: 'E',
                link: function (scope, element, attrs) {

                      scope.initUsers();

                      scope.criticalitylevels = 
                      [
                          {'value': 1, 'level': 'High'},
                          {'value': 2, 'level': 'Med'},
                          {'value': 3, 'level': 'Low'},
                          {'value': 4, 'level': 'None'} 
                      ];
                }
          }
});

Template

<div layout-align="center center">
  <md-content ng-controller="CreateActionController" ng-init="init" layout-padding="" ng-cloak="">
    <init-data />
    <form name="CreateActionItem" role="form" ng-submit="CreateActionItem.$valid && submit()" novalidate>
      <div flex-gt-xs>
        <md-input-container>
          <label>Assignor</label>
          <md-select required placeholder="Assignor" ng-model="actionitem.assignor" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="actionitem.assignor" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container>
          <label>Original Due Date</label>
          <md-datepicker ng-model="actionitem.dueDate" md-min-date="today" md-placeholder="Enter date">
          </md-datepicker>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container>
          <label>ECD</label>
          <md-datepicker ng-model="actionitem.ecd" md-min-date="today" md-placeholder="Enter date">
          </md-datepicker>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Criticality</label>
          <md-select required ng-model="actionitem.criticality" style="min-width: 200px">
            <md-option ng-repeat="criticality in criticalitylevels" ng-model-options="{trackBy: 'criticality.level'}"
              ng-value="criticality">
              {{criticality.level}}
            </md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Owner</label>
          <md-select required placeholder="Owner" ng-model="actionitem.owner" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="owner" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Alt Owner</label>
          <md-select required placeholder="Alt Owner" ng-model="actionitem.altowner" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="actionitem.altowner" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="text-input" flex="100">
          <label>Action Item Title</label>
          <input required name="title" ng-model="actionitem.title">
          <div ng-if="actionitem.title.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="textarea-input" flex="100">
          <label>Action Item Statement</label>
          <textarea required name="statement" ng-model="actionitem.statement" md-maxlength="255" rows="5"
            ></textarea>
          <div ng-if="actionitem.statement.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="textarea-input" flex="100">
          <label>Closure Criteria</label>
          <textarea required name="closurecriteria" ng-model="actionitem.closurecriteria" md-maxlength="255" rows="5"
            ></textarea>
          <div ng-if="actionitem.closurecriteria.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <md-divider></md-divider>
      <section layout="col" layout-sm="column" layout-align="center center" layout-wrap>
        <!--md-button class="md-raised">Button</md-button-->
        <md-button type="submit"  class="md-raised md-primary">Create Action Item</md-button>
        <!--md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
              <md-button class="md-raised md-warn">Warn</md-button>
              <div class="label">Raised</div-->
      </section>
    </form>
  </md-content>
</div>

Answer 1

Use of negation (!) of .length inside my ng-if instead of == '' fixed the issue.

Example

I replaced

ng-if="actionitem.closurecriteria.trim() == ''"

with

ng-if="!actionitem.closurecriteria.trim().length" 

and got the desired result!