Form
Recently, commit 94533e57 made a change regarding the name attribute of form elements in AngularJS. Now, the name attribute should only contain characters that can be evaluated as part of an Angular expression. This adjustment was necessary because Angular now uses the value of the name attribute as an assignable expression to set the form on the $scope. For instance, using name="myForm" will assign the form to $scope.myForm, while name="myObj.myForm" will assign it to $scope.myObj.myForm.
In the past, special characters like colons (e.g. name="my:name") were allowed due to Angular's use of a specific setter function for form names. However, this functionality has been replaced with a more robust $parse setter.
To update your code accordingly, it is recommended to remove any special characters from the name attribute.
If you must retain special characters in the name attribute, you can utilize the provided directive. This directive replaces the name with an expression-friendly value during compilation and then restores the original name in the post-linking phase. By doing this, it ensures that the form is appropriately published on the scope and retains the original name, which may be crucial for server-side form submissions.
angular.module('myApp').directive('form', function() {
return {
restrict: 'E',
priority: 1000,
compile: function(element, attrs) {
var unsupportedCharacter = ':'; // adjust as needed
var originalName = attrs.name;
if (attrs.name && attrs.name.indexOf(unsupportedCharacter) >= 0) {
attrs.$set('name', 'this["' + originalName + '"]');
}
return postLinkFunction(scope, element) {
// Ensure original name is preserved
element.setAttribute('name', originalName);
}
}
};
});