AngularJS-重置表单

AngularJS - reset form

本文关键字：表单 AngularJS-      更新时间：2024-01-12

我有一个带有动画占位符的表单；由指令（hasfocus）驱动，它绑定模糊、更改和焦点事件。这很好，但当我重置表单时，视图不会更新，我希望触发更改事件。

如果输入文本并单击登录，文本将被删除，但活动的类将不会从标签中删除。

控制器

$scope.send = function(){
    //1. ajax to send data
    //2. if response is true reset form... 
    $scope.password = "";
    $scope.username = "";
};

指令

app.directive('hasfocus', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('blur', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('change', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('focus', function() {
        element.parent().find('label').addClass('active');
      });
    }
  };
});

JSFiddle

感谢

考虑对示例的以下更改：

  • 对登录部分使用<form>标记
  • 重置表单时，请在表单上调用.$setPristine()以重置脏标志

表单重置的工作示例可以在AngularjsHub 上找到

我为您提供了一个有效的解决方案，只需对代码进行最小的更改。首先，您需要从控制器发送一个事件来通知指令：

$scope.$broadcast('remove.class');

然后，在指令中，您听取该事件并采取行动：

//private function
function removeClass(element){
    element.parent().find('label').removeClass('active');
}
//when remove.class event is broadcast from controller, the fn() will be triggered
scope.$on('remove.class', function(){
    removeClass(element);
});
相关文章：