обрезать завершающий пробел и показывать заполнитель, когда нет видимого ввода - Angularjs

Question

Рассмотрим следующий ввод

<input ng-if="isRequired()"
       type="text"
       name="{{fieldNamePrefix}}[name]"
       ng-value="orderCommodity.name"
       class="form-control top15"
       ng-disabled="disabled"
       placeholder="CERTIFICATION" />

Теперь учтите, что пользователь входит в пробел и переходит к следующему полю. Мне нужно обрезать это пространство и снова показать заполнитель, так как нет видимого ввода.

Я пробовал ng-trim , но, похоже, не работает. Есть идеи как это исправить?

Answer 1

Вам понадобится пользовательская директива. Он срабатывает на размытие и проверяет входное значение. Если он содержит только пробелы, то значение будет пустым. Обратите внимание, что вам нужно будет использовать ng-model вместо ng-value:

myApp.directive('trimDir', function() {
    return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {

      element.bind('blur', function(e) {
        console.log(ctrl)
        let trimmed = ctrl.$viewValue.replace(/[\s]/g, '');
        if (trimmed.length == 0) {
          ctrl.$setViewValue('');
          ctrl.$render();
        }
      });
    }
  };

})

И в html:

<input type="text" 
       name="name" 
       ng-model="orderCommodity.name" 
       class="form-control top15" 
       placeholder="CERTIFICATION" 
       trim-dir />

Проверьте рабочую демонстрацию здесь: DEMO