La directiva ng-required en AngularJS se usa para especificar el atributo requerido de un elemento HTML. El campo de entrada en el formulario es obligatorio solo si la expresión dentro de la directiva ng-required devuelve verdadero. Es compatible con <input>, <select> y <textarea>.
Sintaxis:
<element ng-required="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-required para establecer el campo de texto de entrada de la etiqueta de formulario en obligatorio.
<!DOCTYPE html>
<html>
<head>
<title>ng-required Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
<style>
.req {
font-size: 90%;
font-style: italic;
color: red;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-required Directive</h2>
<div ng-app="app" ng-controller="myCtrl">
<form name="myForm">
<p>Enter Your Name: <br/>
<span>
<input type="text" name="name"
ng-model="Name" ng-required ="true" />
</span>
</p>
<span ng-show="myForm.name.$invalid" class="req">
This is the required field.
</span>
</form>
</div>
<script>
var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
$scope.Name = "";
});
</script>
</body>
</html>
Salida:
Antes de Ingresar el nombre: 
Después de Ingresar el nombre:
Ejemplo 2: este ejemplo utiliza la directiva ng-required para crear un campo obligatorio después de marcar la casilla de verificación.
<!DOCTYPE html>
<html>
<head>
<title>ng-required Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app"style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-required Directive</h2>
<div ng-controller="geek" style="font-family:arial;">
<form name="myform">
<label for="requiredValue">
Is Required:
</label>
<input type="checkbox" ng-model="requiredValue"
id="required" />
<br><br>
<label for="input">Enter Name: </label>
<input type="text" ng-model="model" id="input"
name="input" ng-required="requiredValue" />
<br>
<p style="color:red;"
ng-show='myform.input.$error.required'>
Name is required
</p>
</form>
</div>
<script>
var app = angular.module('app', [])
app.controller('geek', ['$scope', function($scope) {
$scope.requiredValue = true;
}]);
</script>
</body>
</html>
Salida:
Antes de marcar la casilla de verificación: 
Después de marcar la casilla de verificación:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA