ng-required not working on dynamically added fields

In AngularJS, ng-required ensures that an input field is required. However, when fields are dynamically added, ng-required might not work properly. Let’s go through why this happens and how to fix it step by step.

1. Understanding `ng-required`

ng-required dynamically applies the required attribute based on a condition.

Basic Example:

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

When $scope.isRequired = true, the field is required.
When $scope.isRequired = false, the field is not required.

This works for static fields. However, it fails for dynamically added fields. Let’s see why.

2. Why `ng-required` Does Not Work for Dynamically Added Fields?

1. AngularJS Doesn’t Track Newly Added Elements

When adding fields dynamically (e.g., using ng-repeat), Angular might not track them in the form controller.

2. Form State Is Not Updated Automatically

AngularJS does not automatically re-validate new fields unless they are properly added to the form.

3. `ng-required` Works Only If the Model Exists

If the model for a new field is not initialized, ng-required won’t apply.

3. Fixing `ng-required` for Dynamically Added Fields

Solution 1: Initialize the Model Properly

Make sure each dynamically added field has an initialized model.

Incorrect (Model Undefined):

<input type="text" name="dynamicField" ng-model="dynamicFields[$index]" ng-required="true">

Here, dynamicFields[$index] is undefined when the field is added.

Fix: Initialize Model in Controller

$scope.dynamicFields = [];
$scope.addField = function () {
    $scope.dynamicFields.push({ value: "" }); // Initialize
};

<input type="text" name="dynamicField{{$index}}" ng-model="dynamicFields[$index].value" ng-required="true">

Now, ng-required will work because the model exists.

Solution 2: Ensure Form Updates on Dynamic Changes

If Angular does not track new fields, manually trigger an update.

Fix: Use `$timeout`

$scope.addField = function () {
    $scope.dynamicFields.push({ value: "" });
    $timeout(function () {
        $scope.myForm.$setPristine(); // Refresh form state
    });
};

This forces Angular to detect new fields.

Solution 3: Ensure Form and Input Names Are Unique

If multiple inputs use the same name, AngularJS gets confused.

Incorrect (Same Name for All Fields):

<input type="text" name="dynamicField" ng-model="dynamicFields[$index].value" ng-required="true">

Every field has the same name="dynamicField", so only the last one is validated.

Fix: Unique Names Using Index

<input type="text" name="dynamicField{{$index}}" ng-model="dynamicFields[$index].value" ng-required="true">

Each field now has a unique name (dynamicField0, dynamicField1, etc.).

Solution 4: Use `$watch` to Detect Model Changes

If ng-required is not updating, watch the model.

Fix: Watch for Changes

$scope.$watch("dynamicFields", function () {
    if ($scope.dynamicFields.length > 0) {
        $scope.myForm.$setDirty(); // Mark the form as changed
    }
}, true);

This ensures Angular detects new fields and applies ng-required.

4. Full Working Example

HTML:

<form name="myForm">
  <div ng-repeat="field in dynamicFields track by $index">
    <input type="text" name="dynamicField{{$index}}" ng-model="field.value" ng-required="true">
    <span ng-show="myForm['dynamicField' + $index].$error.required">This field is required!</span>
  </div>

  <button type="button" ng-click="addField()">Add Field</button>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

Controller:

$scope.dynamicFields = [];

$scope.addField = function () {
    $scope.dynamicFields.push({ value: "" });

    // Ensure Angular detects changes
    $timeout(function () {
        $scope.myForm.$setPristine();
    });
};

Now, ng-required works on dynamically added fields!

1. Understanding ng-required