Estimated reading: 4 minutes 43 views

🔧 AngularJS Reactive Forms (Using ngModelController & FormController)

🧲 Introduction – Why Learn AngularJS Reactive Forms?

Unlike Angular (2+) which uses a full-fledged Reactive Forms API, AngularJS doesn’t have a dedicated reactive forms module. However, you can build reactive-like forms in AngularJS by directly interacting with $scope, ngModelController, and FormController. This approach gives you fine-grained control over form validation, dynamic behaviors, and programmatic form updates.

AngularJS reactive form patterns are useful when:

You need to manipulate form state dynamically
Perform manual validation or control resets
Manage form behavior programmatically

🎯 In this guide, you’ll learn:

How AngularJS mimics reactive behavior using ngModelController
How to manipulate form states manually
Programmatic form resets, validation, and dirty/pristine control
Real-world examples of dynamic and reactive forms

⚙️ Reactive Forms in AngularJS – Concept Overview

AngularJS reactive form patterns revolve around:

Accessing form and field controllers
Using $setViewValue, $setPristine, $setDirty, $setValidity, $rollbackViewValue to update state manually
Validating and controlling forms from the controller

This allows developers to go beyond declarative form validation and build fully controlled and dynamic forms.

✅ Basic Setup – Accessing Form Controllers

<form name="reactiveForm" novalidate>
  <input type="text" name="email" ng-model="user.email" required>
</form>

Access in Controller:

$scope.emailCtrl = $scope.reactiveForm.email;

🧾 Now you can use $scope.emailCtrl to programmatically control the input field.

🔄 Example – Manually Changing Field State

$scope.setEmailDirty = function() {
  $scope.reactiveForm.email.$setDirty();
};

$scope.setEmailPristine = function() {
  $scope.reactiveForm.email.$setPristine();
};

$scope.resetEmailValue = function() {
  $scope.user.email = '';
  $scope.reactiveForm.email.$rollbackViewValue();
};

🧾 These methods simulate reactive behavior like Angular’s FormControl.markAsDirty() or reset().

📘 Common FormController & ngModelController Methods

Method	Purpose
`$setViewValue(val)`	Programmatically set a new value
`$setPristine()`	Mark field as pristine (unchanged)
`$setDirty()`	Mark field as dirty (changed)
`$setTouched()`	Manually mark field as touched
`$setUntouched()`	Mark field as untouched
`$rollbackViewValue()`	Undo changes to view before digest
`$setValidity(key, val)`	Set custom validity state (true/false)

🧪 Example – Custom Validation with `$setValidity`

$scope.validateUsername = function(username) {
  if (username.includes('admin')) {
    $scope.reactiveForm.username.$setValidity('noAdmin', false);
  } else {
    $scope.reactiveForm.username.$setValidity('noAdmin', true);
  }
};

HTML:

<input name="username" ng-model="user.username" ng-change="validateUsername(user.username)">
<span ng-show="reactiveForm.username.$error.noAdmin">
  Username cannot contain "admin"
</span>

✅ Adds a custom validation rule dynamically and displays feedback based on $error object.

🔁 Real-World Use Case – Programmatic Reset

<form name="profileForm" novalidate>
  <input type="text" name="name" ng-model="profile.name" required>
  <input type="email" name="email" ng-model="profile.email" required>
  
  <button type="button" ng-click="resetForm()">Reset</button>
</form>

Controller:

$scope.profile = { name: '', email: '' };

$scope.resetForm = function() {
  $scope.profile = {};
  $scope.profileForm.$setPristine();
  $scope.profileForm.$setUntouched();
};

🧾 Mimics form.reset() behavior programmatically.

💡 Reactive vs Template-driven (AngularJS)

Feature	Template-Driven Forms	Reactive-like Forms (Manual Control)
Syntax	HTML-based	JS/controller-based
Ease of Use	Easy for simple forms	Best for complex logic
Custom Validation	Limited	Highly customizable
Form Control Access	Indirect	Full access to form/field objects
Dynamic Field Manipulation	Limited	Full programmatic control

⚠️ Best Practices

✔️ Always use novalidate on reactive-style forms
✔️ Initialize model objects in controller
✔️ Use $setValidity() for custom business rules
✔️ Avoid deep DOM manipulation—stick with state control
✔️ Use ng-form to group reactive logic in subforms if needed

📌 Summary – Recap & Next Steps

While AngularJS doesn’t offer formal Reactive Forms like Angular 2+, its controller-based form control tools provide a powerful and flexible way to create dynamic, interactive forms. By tapping into ngModelController and FormController, developers can simulate reactive form behavior with ease.

🔍 Key Takeaways:

AngularJS supports reactive-style programming using form and input controllers
You can programmatically update values, states, and validations
Useful for complex validation, custom rules, and advanced UI interactions

⚙️ Real-world Relevance:
Ideal for dynamic forms like admin dashboards, complex signup flows, wizard forms, conditional field validation, and error highlighting.

❓ FAQ – AngularJS Reactive Forms

❓ Does AngularJS have a Reactive Forms module like Angular 2+?
✅ No. But you can simulate reactive behavior using ngModelController and FormController.

❓ How do I programmatically mark a field as dirty or touched?
✅ Use $setDirty() and $setTouched() on the form control.

❓ Can I write custom validation logic in AngularJS?
✅ Yes. Use $setValidity('key', boolean) to define and toggle custom error states.

❓ How do I reset a form in AngularJS?
✅ Manually reset the model and call $setPristine() and $setUntouched() on the form.

« Previous Next »

Share Now :