Question

我有一个功能设置，可以重置我页面上的表单。当我点击“重置”按钮时，它会.$setPristine()表单并清除title，address，phone和links字段。

function resetForm() {
  $scope.entryForm.$setPristine();
  $scope.title = '';
  $scope.address = {};
  $scope.phone = '';
  $scope.links = {};
}

问题是，我实际上在该页面上有一些不同的表单，它们有不同的输入字段。

我想知道是否有办法创建更通用的重置函数，而不是编写多个重置函数，运行时将表单设置为.$setPristine()并重置所有字段？

对此有任何帮助表示赞赏。提前谢谢！

Answer 1

更好的方法是声明resetDirective并使用它将表单还原到它初始状态

myApp.directive( 'resetDirective', [ '$parse', function ( $parse ) {
    return function( scope, element, attr ) {
        var fn = $parse( attr.resetDirective );
        var masterModel = angular.copy( fn( scope ) );

        // Error check to see if expression returned a model
        if ( !fn.assign ) {
            throw Error( 'Expression is required to be a model: ' + attr.resetDirective );
        }

        element.bind( 'reset', function ( event ) {
            scope.$apply( function () {
                fn.assign( scope, angular.copy( masterModel ) );
                scope.form.$setPristine();
            });

            if ( event.preventDefault ) {
                return event.preventDefault();
            }
            else {
                return false;
            }
        });
    };
}]);

工作JS Fiddle

Angular：重置表单函数

1 个答案: