Remove eager animations from forms

Author: tolyo

@types/directive/form/form.d.ts

@@ -1,4 +1,14 @@
 export function setupValidity(instance: any): void;
+/**
+ * @param {FormController|ng.NgModelController} ctrl
+ * @param {string} className
+ * @param {boolean} switchValue
+ */
+export function cachedToggleClass(
+  ctrl: FormController | ng.NgModelController,
+  className: string,
+  switchValue: boolean,
+): void;
 /**
  * @type {{
  *   $nonscope: boolean,
@@ -74,19 +84,21 @@ export class FormController {
   static $nonscope: boolean;
   static $inject: string[];
   /**
-   * @param {Element} $element
+   * @param {HTMLFormElement} $element
    * @param {ng.Attributes} $attrs
    * @param {ng.Scope} $scope
    * @param {ng.AnimateService} $animate
    * @param {ng.InterpolateService} $interpolate
    */
   constructor(
-    $element: Element,
+    $element: HTMLFormElement,
     $attrs: ng.Attributes,
     $scope: ng.Scope,
     $animate: ng.AnimateService,
     $interpolate: ng.InterpolateService,
   );
+  /** @type {boolean} */
+  _isAnimated: boolean;
   _controls: any[];
   $name: any;
   /**
@@ -102,7 +114,7 @@ export class FormController {
   $submitted: boolean;
   /** @type {FormController|Object} */
   _parentForm: FormController | any;
-  _element: Element;
+  _element: HTMLFormElement;
   _animate: import("../../animations/interface.ts").AnimateService;
   $error: {};
   _success: {};

@types/directive/model/model.d.ts

@@ -52,7 +52,7 @@ export class NgModelController {
    * @param {ng.Scope} $scope
    * @param {ng.ExceptionHandlerService} $exceptionHandler
    * @param {ng.Attributes} $attr
-   * @param {Element} $element
+   * @param {HTMLElement} $element
    * @param {ng.ParseService} $parse
    * @param {ng.AnimateService} $animate
    * @param {ng.InterpolateService} $interpolate
@@ -61,11 +61,13 @@ export class NgModelController {
     $scope: ng.Scope,
     $exceptionHandler: ng.ExceptionHandlerService,
     $attr: ng.Attributes,
-    $element: Element,
+    $element: HTMLElement,
     $parse: ng.ParseService,
     $animate: ng.AnimateService,
     $interpolate: ng.InterpolateService,
   );
+  /** @type {boolean} */
+  _isAnimated: boolean;
   /** @type {any} The actual value from the control's view  */
   $viewValue: any;
   /** @type {any} The value in the model that the control is bound to. */
@@ -144,7 +146,7 @@ export class NgModelController {
   /** @type {ng.Scope} */
   _scope: ng.Scope;
   _attr: ng.Attributes;
-  _element: Element;
+  _element: HTMLElement;
   _animate: import("../../animations/interface.ts").AnimateService;
   _parse: import("../../core/parse/interface.ts").ParseService;
   _exceptionHandler: import("../../services/exception/interface.ts").ExceptionHandler;

src/core/compile/compile.js

@@ -2661,6 +2661,10 @@ export class CompileProvider {
           }
         }
 
+        /**
+         * @param {ng.Directive[]} directives
+         * @param {string} text
+         */
         function addTextInterpolateDirective(directives, text) {
           const interpolateFn = $interpolate(text, true);
 

src/directive/form/form.js

@@ -121,13 +121,16 @@ export class FormController {
   ];
 
   /**
-   * @param {Element} $element
+   * @param {HTMLFormElement} $element
    * @param {ng.Attributes} $attrs
    * @param {ng.Scope} $scope
    * @param {ng.AnimateService} $animate
    * @param {ng.InterpolateService} $interpolate
    */
   constructor($element, $attrs, $scope, $animate, $interpolate) {
+    /** @type {boolean} */
+    this._isAnimated = hasAnimate($element);
+
     this._controls = [];
 
     this.$name = $interpolate($attrs.name || $attrs.ngForm || "")($scope);
@@ -491,16 +494,6 @@ export class FormController {
       }
     }
 
-    function cachedToggleClass(ctrl, className, switchValue) {
-      if (switchValue && !ctrl._classCache[className]) {
-        ctrl._animate.addClass(ctrl._element, className);
-        ctrl._classCache[className] = true;
-      } else if (!switchValue && ctrl._classCache[className]) {
-        ctrl._animate.removeClass(ctrl._element, className);
-        ctrl._classCache[className] = false;
-      }
-    }
-
     function toggleValidationCss(ctrl, validationErrorKeyParam, isValid) {
       validationErrorKeyParam = validationErrorKeyParam
         ? `-${snakeCase(validationErrorKeyParam, "-")}`
@@ -732,3 +725,26 @@ export function setupValidity(instance) {
   instance._classCache[INVALID_CLASS] = !(instance._classCache[VALID_CLASS] =
     instance._element.classList.contains(VALID_CLASS));
 }
+
+/**
+ * @param {FormController|ng.NgModelController} ctrl
+ * @param {string} className
+ * @param {boolean} switchValue
+ */
+export function cachedToggleClass(ctrl, className, switchValue) {
+  if (switchValue && !ctrl._classCache[className]) {
+    if (ctrl._isAnimated) {
+      ctrl._animate.addClass(ctrl._element, className);
+    } else {
+      ctrl._element.classList.add(className);
+    }
+    ctrl._classCache[className] = true;
+  } else if (!switchValue && ctrl._classCache[className]) {
+    if (ctrl._isAnimated) {
+      ctrl._animate.removeClass(ctrl._element, className);
+    } else {
+      ctrl._element.classList.remove(className);
+    }
+    ctrl._classCache[className] = false;
+  }
+}

src/directive/model/model.js

@@ -24,7 +24,11 @@ import {
   minErr,
   snakeCase,
 } from "../../shared/utils.js";
-import { PENDING_CLASS, nullFormCtrl } from "../form/form.js";
+import {
+  PENDING_CLASS,
+  cachedToggleClass,
+  nullFormCtrl,
+} from "../form/form.js";
 import { defaultModelOptions } from "../model-options/model-options.js";
 import { startingTag } from "../../shared/dom.js";
 import { $injectTokens as $t } from "../../injection-tokens.js";
@@ -84,7 +88,7 @@ export class NgModelController {
    * @param {ng.Scope} $scope
    * @param {ng.ExceptionHandlerService} $exceptionHandler
    * @param {ng.Attributes} $attr
-   * @param {Element} $element
+   * @param {HTMLElement} $element
    * @param {ng.ParseService} $parse
    * @param {ng.AnimateService} $animate
    * @param {ng.InterpolateService} $interpolate
@@ -98,6 +102,8 @@ export class NgModelController {
     $animate,
     $interpolate,
   ) {
+    /** @type {boolean} */
+    this._isAnimated = hasAnimate($element);
     /** @type {any} The actual value from the control's view  */
     this.$viewValue = Number.NaN;
 
@@ -216,25 +222,6 @@ export class NgModelController {
       }
     }
 
-    function cachedToggleClass(ctrl, className, switchValue) {
-      if (switchValue && !ctrl._classCache[className]) {
-        if (hasAnimate(ctrl._element)) {
-          ctrl._animate.addClass(ctrl._element, className);
-        } else {
-          ctrl._element.classList.add(className);
-        }
-
-        ctrl._classCache[className] = true;
-      } else if (!switchValue && ctrl._classCache[className]) {
-        if (hasAnimate(ctrl._element)) {
-          ctrl._animate.removeClass(ctrl._element, className);
-        } else {
-          ctrl._element.classList.remove(className);
-        }
-        ctrl._classCache[className] = false;
-      }
-    }
-
     function toggleValidationCss(ctrl, validationErrorKeyParam, isValid) {
       validationErrorKeyParam = validationErrorKeyParam
         ? `-${snakeCase(validationErrorKeyParam, "-")}`