Create a Directive that forces the bind of a form

Question

Following a publication by Fernando Mantoan, the thing seems to be quite simple, creates the Directive:

myApp.directive('forceBind',  function() {
  return {
    require: '^form',
    priority: -1,
    link: function (scope, element, attrs, form) {
      element.bind('submit', function() {
        if (form.$valid) {
          angular.forEach(form, function(value, key) {  
            if (value.hasOwnProperty('$modelValue')) {
              if (!value.$viewValue) {
                value.$setViewValue("");
              }
            }
          });
        }
      });
    }
  };
});

And the problem would be solved, it even shows the code working.

Only when I went to do it on my app, look what came up:

After a couple of days of searching, I discovered that this error was due to the angular version, he uses the version 1.2.1. Then my problems start, because I use version 1.6.3 at the angle, and I’ve tried everything to change syntax, but I believe I don’t have the necessary knowledge. :(

Here’s the code part where I use Directive in the form:

<form  force-bind ng-model="formUsuario" name="formUsuario"  ng-submit="salvarUsuario()" autocomplete='off'>
<div class="row">
    <div class="col-sm-12 text-center">
        <h1>Dados Pessoais</h1>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <div class="control-group">
            <input  class="form-control"  type="text" placeholder="Matrícula" floating-label ng-model="usuario.matricula" ng-disabled="{desabilita}"/>
        </div>
    </div>
    <div class="col-sm-10">
        <div class="control-group">
            <input  class="form-control"  type="text" placeholder="Nome" floating-label ng-model="usuario.nome" required />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-5">
        <div class="control-group">
            <input  class="form-control"  type="text" placeholder="E-mail" floating-label ng-model="usuario.email"/>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="control-group">
            <div class="floating-label ng-valid ng-not-empty">
                <label class="active" for="perfil_id">Perfil</label>
                <select id="perfil_id" class="form-control" ng-model="usuario.perfil_id" ng-options="v.id as v.descricao for (k, v) in perfis" ng-disabled="{desabilita}">
                </select>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="control-group">
            <div class="floating-label ng-valid ng-not-empty">
                <label class="active" for="ativo">Ativo</label>
                <select id="ativo" class="form-control" ng-model="usuario.ativo" ng-disabled="{desabilita}">
                    <option value="1">Ativo</option>
                    <option value="2">Desativado</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="control-group">
            <input  class="form-control" type="password" placeholder="Senha Atual" floating-label ng-model="usuario.senhaAtual" ng-trim="false" >
        </div>
    </div>
    <div class="col-sm-4">
        <div class="control-group">
            <input  class="form-control" type="password" placeholder="Nova Senha" floating-label ng-model="usuario.novaSenha" />
        </div>
    </div>
    <div class="col-sm-4">
        <div class="control-group">
            <input  class="form-control" type="password" placeholder="Senha Confirmada" floating-label ng-model="usuario.senhaConfirmada" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 text-right">
        <button type="submit" class="btn btn-primary" ng-model="btnSalvar" ng-disabled="formLogin.$invalid || formUsuario.$pristine || btnCarregando.ativo">
            <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate" ng-class="{'hidden':!btnCarregando.ativo}"></div>
            {{btnCarregando.ativo ? btnCarregando.mensagem : 'Salvar lterações'}}
        </button>
    </div>
</div>

I believe that the code is enough, the Directive and the html that makes the call force-bind, if it is necessary something more just comment that I add.

The big question is how to make a force-bind to angular js in version 1.6.3 avoiding the error:

ncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
at force-bind.js:13
at Object.forEach (angular.js:424)
at HTMLFormElement.<anonymous> (force-bind.js:12)
at HTMLFormElement.dispatch (jquery-3.2.1.js:5206)
at HTMLFormElement.elemData.handle (jquery-3.2.1.js:5014)
   (anonymous) @ force-bind.js:13
   forEach @ angular.js:424
   (anonymous) @ force-bind.js:12
   dispatch @ jquery-3.2.1.js:5206
   elemData.handle @ jquery-3.2.1.js:5014

And can make an input be identified to if sent to the backend.

Answer 1

I wonder, how to search a property that is not stated in the code? I used that code adaptation:

tcc.directive('forceBind',  function() {
return {
    require: '^form',
    priority: -1,
    link: function (scope, element, attrs, form) {
        element.bind('submit', function() {
            if (form.$valid) {
                angular.forEach(form, function(value, key) {
                    if(typeof value == 'object'){
                        if (value.hasOwnProperty('$modelValue')) {
                            if (!value.$viewValue) {
                                value.$setViewValue("");
                            }
                        }
                    }
                });
            }
        });
    }
};
});

With the directive above the error was no longer presented, but also the campus Bing was not forced at the time of sending the code, only after long I realized that, I was not using the attribute name us inputs, causing the error to be presented.

I just put the attribute name and everything started to work:

<div class="control-group">
     <input  class="form-control" name="teste3"type="password" placeholder="Senha Confirmada" floating-label ng-model="usuario.senhaConfirmada" />
</div>

References:

Example 1, in this example all fields have the attribute name

Example 2, in this example NOT all fields have the name attribute, but what you have works