Question

我是Angular的新手，我有一个简单的检索密码表单，其中包含1个电子邮件字段和一个提交按钮。我希望在表单提交后清除表单，但即使在线完成教程/答案之后，我似乎也无法做到。

我认为这可能是我不能从根本上理解的事情，所以如果可以的话请告诉我这会很棒。

我正在使用Angular v1.2.22

HTML（signin.forgotpassword.html）

<form name="forgotPasswordForm" class="form" role="form" ng-submit="forgetPasswordSubmit(forgetForm.email)" novalidate >
    <div>
        <label for="input-email" class="col-sm-2 control-label">Email</label>
        <div>
             <input name="email" ng-model="forgetForm.email" type="email" class="form-control" id="input-email" />               
        </div>
    </div>
    <div class="form-group">
        <div>
            <button name="submit" type="submit">Reset Password</button>
        </div>
    </div>
</form>

Angular（AuthController）

var forgetPasswordClear = function(){
    var defaultForm = {
        email: ''
    };
    // clear input            
    $scope.forgetForm = defaultForm; // Doesn't clear
   // set form as pristine
    $scope.forgotPasswordForm.$setPristine(); // Get Cannot read property '$setPristine' of undefined
};

$scope.forgetPasswordSubmit = function(email){
    forgetPasswordClear();
};

---------- ---------- EDIT

我不确定是不是因为我的表格位于不同的ui视图中？我的结构看起来像这样：

HTML

<section data-ng-controller="AuthController">
    <div data-ui-view>
        Some content in there originally
        <a ui-sref="signin.forgetpassword">Click here to get password</a>
    </div>
</section>

Ui路由器

.state('signin.forgotpassword', {
    url: '/signup/forgot-password',
    templateUrl: 'modules/core/templates/signin.forgotpassword.html'
})

Answer 1

您设置了错误的模型：

你的模特是'forgetForm'

 <input name="email" ng-model="forgetForm.email" type="email" class="form-control" id="input-email" ng-pattern="/.+\@.+\..+/" autofocus required />

电流：

$scope.forget = defaultForm;

应该是：

$scope.forgetForm = defaultForm;

编辑解决新问题

这是因为这是一个儿童范围。

您需要使用事件发射器和侦听器。

$broadcast - 将事件向下发送到所有子范围， $emit - 通过范围层次结构向上调度事件。

在此处阅读更多内容：Working with $scope.$emit and $scope.$on

无法重置表单

1 个答案: