Required Field Validation with ng-required

ng-required is a built-in AngularJS directive used to ensure that a form field is mandatory before form submission. It is commonly used in forms where input fields must not be left empty.

Topics Covered

Why Use ng-required?
Syntax of ng-required
Simple Example: Required Input Field
Using ng-required with Conditional Validation
Handling Validation Messages
Complete Example with Form Submission
Conclusion

1. Why Use `ng-required`?

Ensures users do not leave required fields empty
Works dynamically with AngularJS expressions
Integrates with form validation ($valid, $error, etc.)
Improves user experience with real-time feedback

2. Syntax of `ng-required`

<input type="text" ng-model="inputValue" ng-required="true">

ng-required="true" → Makes the field mandatory
ng-model="inputValue" → Binds the input value to a model

ng-required can also be dynamically controlled using expressions:

<input type="text" ng-model="name" ng-required="isRequired">

The field becomes required when isRequired = true.

3. Simple Example: Required Input Field

<form name="myForm">
    <label>Username:</label>
    <input type="text" name="username" ng-model="user.username" ng-required="true">
    <span ng-show="myForm.username.$error.required">Username is required.</span>
</form>

Displays an error message when the field is empty

4. Using `ng-required` with Conditional Validation

You can use AngularJS expressions to make a field required only under certain conditions.

Example: Make Email Required Only If `subscribe` is Checked

<form name="subscribeForm">
    <label>
        <input type="checkbox" ng-model="subscribe"> Subscribe to Newsletter
    </label>

    <br>

    <label>Email:</label>
    <input type="email" name="email" ng-model="user.email" ng-required="subscribe">
    
    <span ng-show="subscribeForm.email.$error.required">Email is required if you subscribe.</span>
</form>

The email field becomes required only when the checkbox is checked

5. Handling Validation Messages

To improve user experience, AngularJS provides $error.required to show error messages dynamically.

<form name="myForm">
    <label>Password:</label>
    <input type="password" name="password" ng-model="user.password" ng-required="true">
    
    <span ng-show="myForm.password.$error.required">Password is required.</span>
</form>

Error messages disappear when the user fills in the input

6. Complete Example with Form Submission

Here’s a full form example with required field validation and error messages.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.8.2/angular-messages.min.js"></script>
</head>
<body ng-controller="FormController">

    <form name="registerForm" ng-submit="submitForm()" novalidate>
        
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" ng-required="true">
        <div ng-messages="registerForm.name.$error">
            <span ng-message="required">Name is required.</span>
        </div>

        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" ng-required="true">
        <div ng-messages="registerForm.email.$error">
            <span ng-message="required">Email is required.</span>
        </div>

        <label>Password:</label>
        <input type="password" name="password" ng-model="user.password" ng-required="true">
        <div ng-messages="registerForm.password.$error">
            <span ng-message="required">Password is required.</span>
        </div>

        <button type="submit" ng-disabled="registerForm.$invalid">Register</button>
    </form>

    <script>
        var app = angular.module('myApp', ['ngMessages']);

        app.controller('FormController', function ($scope) {
            $scope.user = {};
            $scope.submitForm = function () {
                if ($scope.registerForm.$valid) {
                    alert("Form submitted successfully!");
                }
            };
        });
    </script>

</body>
</html>

Prevents form submission if required fields are empty
Uses ng-messages for better error handling
Disables submit button if the form is invalid

Topics Covered

1. Why Use ng-required?

2. Syntax of ng-required