angularjs - pasar - formularios en angular 5

Angular-Error: $ rootScope: infdig al configurar un atributo de directiva usando una variable de controlador

Question

Tengo una directiva que impide que ciertos valores se ingresen en una entrada. Por ejemplo esto ...

<input type="number" name="testValue" ng-model="testValue"
block="[0, 10, 17]" />

... dará un error de validación si el usuario ingresa 0, 10 o 17.

Esto funciona bien, pero ahora necesito configurar de forma condicional los valores que se bloquean dependiendo de una variable en mi controlador, así que traté de usar un ternario para establecer el valor, así ...

<input type="number" name="testValue" ng-model="testValue"
block="blockValues ? [0, 10, 17] : []" />

Sin embargo, esto está causando un error: $ rootScope: infdig Infinite $ digest Loop , y no entiendo por qué. ¿Podría alguien explicarme este error y qué puedo hacer para solucionarlo? O cualquier otra alternativa sería apreciada también. ¡Gracias!

Aquí hay un fragmento de código para demostrar:

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.blockValues = true;
$scope.testValue = '''';
});
myApp.directive(''block'', function() {
''use strict'';
return {
restrict: ''A'',
require: ''ngModel'',
scope: {
block: ''=''
},
link: function(scope, element, attrs, ngModel) {
ngModel.$validators.allowedValues = function (value) {
return !scope.block || scope.block.indexOf(value) === -1;
};
}
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<!-- Errors -->
<input type="number" name="testValue" ng-model="testValue"
block="blockValues ? [0] : []" />
<!-- No Errors
<input type="number" name="testValue" ng-model="testValue"
block="false ? [0] : []" />
-->
<!-- No Errors
<input type="number" name="testValue" ng-model="testValue"
block="true ? [0] : []" />
-->
<!-- No Errors
<input type="number" name="testValue" ng-model="testValue"
block="[0]" />
-->
<!-- No Errors
<input type="number" name="testValue" ng-model="testValue"
ng-min="blockValues ? 1 : 0" />
-->
</form>
<div>{{myForm.testValue.$error}}</div>
</div>

Answer 1

Un error común es vincular a una función que genera una nueva matriz cada vez que se llama. En este caso [0] se genera una nueva matriz [0] cada vez, creando un error de resumen infinito.

 <!-- Infinite Digest Errors
<input type="number" name="testValue" ng-model="testValue"
block="blockValues ? [0] : []" />
-->

Como devuelve una nueva matriz, AngularJS determina que el modelo es diferente en cada ciclo de $digest , lo que da como resultado el error. La solución es devolver el mismo objeto de matriz si los elementos no han cambiado:

 <!-- FIXED -->
<input type="number" name="testValue" ng-model="testValue"
ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />

Para obtener más información, consulte AngularJS Error Reference - $ rootScope / infdig

La demo

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.blockValues = true;
$scope.testValue = '''';
});
myApp.directive(''block'', function() {
''use strict'';
return {
restrict: ''A'',
require: ''ngModel'',
scope: {
block: ''=''
},
link: function(scope, element, attrs, ngModel) {
ngModel.$validators.allowedValues = function (value) {
return !scope.block || scope.block.indexOf(value) === -1;
};
}
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<!-- Infinite Digest Errors
<input type="number" name="testValue" ng-model="testValue"
block="blockValues ? [0] : []" />
-->
<!-- FIXED -->
<input type="number" name="testValue" ng-model="testValue"
ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />
</form>
<div>{{myForm.testValue.$error}}</div>
</div>

Answer 2

Encontré usar ng-model-options ayudado:

ng-model-options="{ allowInvalid: true, debounce: 200 }"

Lea sobre los documentos más, aquí: https://docs.angularjs.org/api/ng/directive/ngModelOptions