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.