Create a directive that forces a form's bind

0

Following a publication of Fernando Mantoan , the It looks like a simple thing, it's a 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 working code .

Only when I went to do my application, look what appeared:

Afteracoupleofdaysofsearching,Idiscoveredthatthiserrorwouldbeduetotheangularversion,itusesthe 1.2.1 . Hence my problems begin, as I use version 1.6.3 in the angular, and have tried everything to change syntax, but I believe I do not have the necessary knowledge. :

Here is the part of the code where I make use of the 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 think the code is enough, the directive and the html that makes the force-bind call, in case something else is needed just to 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 be able to make an input be identified when sent to the backend.

    
asked by anonymous 16.10.2017 / 08:02

1 answer

0

I wonder, how do I get a property that is not declared in the code? I used this 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 directive up, the error was no longer displayed, but I was not forced to bing the campus at the moment of sending the code, only after a long time I realized that I was not using the name inputs , causing the error to be displayed.

I just put the name attribute 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 name attribute

Example 2, in this example NEM all fields have the name attribute, but what has it works

    
16.10.2017 / 22:37