Focus on empty ng-model data after ng-readonly=true

Question

I have a form input. When the page is loaded the input has "ng-readonly=true" property and it only shows the data.

When I double click (ng-dblclick) the property "ng-readonly" changes to false and I can edit the input. For all this, it is working currectly. But when the data (ng-model="school.fax") a row data is empty it does do a focus, and I need to click on the input to focus and start writing.

It does not happen when the data is not empty (ng-model="school.fax" have value, get value from server API) and in this case, it's working correctly

The question: How can I focus on the empty input and start writing without need to click the input row?

The code:

HTML

<label>
    <input class="inputs"
        type="text"
        ng-readonly="!edit_school_fax"
        ng-dblclick="editSchoolFax(true)"
        ng-model="school.fax"/>
</label>

JS

$scope.editSchoolFax = function(edit) {
    $scope.edit_school_fax = edit;
};

FYI I try, and it does not work for me:

Add "autofocus" inside the input <input autofocus
Use directive like this solution: LINK

score 0 · Answer 1 · answered Dec 14 '17 at 12:18

add custom directive

 link(scope, element, attrs) {
       scope.$watch(attrs.someAttrs, (newVal, oldVal) => {
            if (newVal === true && newVal !== oldVal) {
              $timeout(() => {
                element
                    .focus()
                    .select();
            });
            }
        });
    },

score 0 · Answer 2 · answered Dec 14 '17 at 18:05

Use a custom directive that adds a focus method to the ngModelController:

app.directive("inputFormFocus", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink (scope, elem, attrs, ngModel) {
    console.log("postLink");
    console.log(ngModel);
    ngModel.focus = function() {
      elem[0].focus();
    }
  }
})

Usage

<form name="form1">
   <input input-form-focus
          name="fax" 
          class="inputs"
          type="text"
          ng-readonly="!edit_school_fax"
          ng-dblclick="editSchoolFax(true)"
          ng-model="school.fax"/>
</form>

$scope.form1.fax.focus();

The DEMO

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.editSchoolFax = function(edit) {
    $scope.edit_school_fax = edit;
  };
  $scope.school = { fax: "555-100-1234" };
  $scope.faxFocus = function() {
    $scope.edit_school_fax = true;
    $scope.form1.fax.focus();
  };
})
.directive("inputFormFocus", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink (scope, elem, attrs, ngModel) {
    ngModel.focus = function() {
      console.log(attrs.name + " focus");
      elem[0].focus();
    }
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <form name="form1">
       <input input-form-focus
              name="fax" 
              class="inputs"
              type="text"
              ng-readonly="!edit_school_fax"
              ng-dblclick="editSchoolFax(true)"
              ng-model="school.fax"/>
    </form>
    <button ng-click="faxFocus()">Focus and Edit</button>
  </body>

Focus on empty ng-model data after ng-readonly=true

2 Answers2

Usage

The DEMO