ngModel es una directiva que vincula input, select y textarea, y almacena el valor de usuario requerido en una variable y podemos usar esa variable siempre que necesitemos ese valor.
También se utiliza durante las validaciones en un formulario.
Podemos usar ngModel con:
- aporte
- texto
- caja
- radio
- número
- URL
- fecha
- datetime-local
- tiempo
- mes
- semana
- Seleccione
- área de texto
Ejemplo:
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.column {
float: left;
text-align: left;
width: 49%;
}
.row {
content: "";
display: table;
}
</style>
<body ng-app="myApp"
ng-controller="myController">
<h4>Input Box-</h4>
<div class="row">
<div class="column">
Name-
<input type="text"
ng-model="name">
<pre> {{ name }} </pre> Checkbox-
<input type="checkbox"
ng-model="check">
<pre> {{ check }} </pre> Radiobox-
<input type="radio"
ng-model="choice">
<pre> {{ choice }} </pre> Number-
<input type="number"
ng-model="num">
<pre> {{ num }} </pre> Email-
<input type="email"
ng-model="mail">
<pre> {{ mail }} </pre> Url-
<input type="url"
ng-model="url">
<pre> {{ url }} </pre>
</div>
<div class="column">
Date:
<input type="date" ng-model="date1" (change)="log(date1)">
<pre> Todays date:{{ date1+1 }}</pre> Datetime-local-
<input type="datetime-local" ng-model="date2">
<pre> {{ date2+1 }} </pre> Time-
<input type="time" ng-model="time1">
<pre> {{ time1+1 }} </pre> Month-
<input type="month" ng-model="mon">
<pre> {{ mon+1 }} </pre> Week-
<input type="week" ng-model="we">
<pre> {{ we+1 }} </pre>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "Hello Geeks!";
$scope.check = "";
$scope.rad = "";
$scope.num = "";
$scope.mail = "";
$scope.url = "";
$scope.date1 = "";
$scope.date2 = "";
$scope.time1 = "";
$scope.mon = "";
$scope.we = "";
$scope.choice = "";
$scope.c = function() {
$scope.choice = true;
};
});
</script>
</html>
Para hacer que la URL y el correo electrónico se impriman, tenemos que escribir un correo electrónico/URL válido solo entonces se imprimirá. En caso de imprimir la fecha, la hora usando ngmodel, debemos completar todos los campos en el cuadro de entrada. El botón de radio una vez seleccionado no se deseleccionará ya que en la función de «c» estamos configurando el valor de elección como verdadero.
Ngmodel usando formularios:
también podemos definir ngModel de esta manera,
Escriba el siguiente código en app.component.html
<div class="form-group">
<label for="phone">mobile</label>
<form>
<input
type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
</form>
<pre>{{ phone.value }}</pre>
</div>
ngModel almacena una variable por referencia, no por valor. Por lo general, en la vinculación de entradas a modelos que son objetos (por ejemplo, Fecha) o colecciones (por ejemplo, arrays).
El objeto de teléfono creado tiene muchos campos que se utilizan con fines de validación . Podemos agregar las siguientes clases con fines de validación. Estamos enumerando sólo los más importantes.
- ng-tocado
- ng-sin tocar
- ng-válido
- ng-inválido
- ng-sucio
- ng-pendiente
- ng-prístino
Vincular ngModel con getter y setter:
cada vez que se llama a una función con cero argumentos, devuelve una representación del modelo. Y cuando se llama con un parámetro, establece el valor. Dado que ngModel se refiere a la dirección, es por eso que no guarda el valor modificado en el objeto en sí, sino que lo guarda en algún estado interno (variable-name.value). Será útil si mantenemos la práctica de usar getter y setter para modelos cuando hay una representación interna, ya que la función getter y setter se llama con más frecuencia en comparación con el resto de las partes del código.
Sintaxis:
ng-model-options="{ getterSetter: true }"
Agregue esto a la pestaña de entrada.
Ejemplo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<form>
Name:<input type="text" name="Name"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
<pre>user.name = <span ng-bind="user.name()"></span></pre>
Name1:<input type="text" name="Name1"
ng-model="user.name1"
ng-model-options="{ getterSetter: true }" />
<pre>user.name = <span ng-bind="user.name1()"></span></pre>
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
name = 'GeeksforGeeks';
name1 = "";
$scope.user = {
name: function(Name) {
return arguments.length ? (name = Name) : name;
},
name1: function(Name1) {
return arguments.length ? (name1 = Name1) : name1;
}
};
}]);
</script>
</body>
</html>
Aquí, hemos inicializado name por la string Geeksforgeeks y name1 por una string vacía.
Referencias:
https://docs.angularjs.org/api/ng/directive/ngModel
Publicación traducida automáticamente
Artículo escrito por janice_shah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA