Componente/directiva de formulario personalizado AngularJS usando ng-model
angularjs-directive angular-forms (1)
Implementación de controles de formulario personalizados (usando
ngModel
)
Utilice el
controlador ngModel
y la forma de objeto de la
propiedad
require
en el DDO:
angular.module(''myModule'', [])
.directive(''myDirective'', function() {
return {
restrict: ''E'',
require: { ngModelCtrl: ''ngModel'' },
scope: {
ngModel: ''<''
},
bindToController: true,
controllerAs: ''$ctrl'',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue(''foo'')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue(''bar'')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});
Uso:
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
Al crear instancias y usar el controlador ng-model , la directiva establecerá automáticamente los controles de formulario según sea necesario.
La DEMO
angular.module(''myModule'', [])
.directive(''myDirective'', function() {
return {
restrict: ''E'',
require: { ngModelCtrl: ''ngModel'' },
scope: {
ngModel: ''<''
},
bindToController: true,
controllerAs: ''$ctrl'',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue(''foo'')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue(''bar'')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myModule">
<h2>ngModel DEMO</h2>
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
<br>myForm.$dirty = {{myForm.$dirty}}
<br>myForm.$pristine = {{myForm.$pristine}}
<br><button ng-click="myForm.$setDirty()">Set dirty</button>
<br><button ng-click="myForm.$setPristine()">Set pristine</button>
</body>
Recomiendo aislar el alcance con
ngModel
como entrada.
La salida debe hacerse con el
método $ setViewValue
.
Para más información, ver
Componente / directiva de formulario personalizado angular y propiedad $ dirty
Cuando se usa una entrada regular, como
<form name="myForm">
<input type="text" ng-model="foobar">
</form>
después de escribir en el cuadro de entrada
myForm.$dirty
es verdadero.
Me gustaría crear una directiva simple como
angular.module(''myModule'', [])
.directive(''myDirective'', function() {
return {
restrict: ''E'',
scope: {
fooBar: ''=''
},
template: ''<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>''
};
});
El uso de la muestra sería
<form name="myForm">
<my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>
y después de que el usuario hace clic en cualquiera de los dos botones,
myForm$dirty
se establece en verdadero.
¿Cómo se logra esto?