【问题标题】:Mark form as unsubmitted in AngularJS在AngularJS中将表单标记为未提交
【发布时间】:2014-12-24 22:43:52
【问题描述】:

在 AngularJS 中,有没有办法将已经提交的表单标记为未提交(因此它会丢失 ng-submitted 类?

背景:

在我的 css 中,我使用角度验证类来完成以下任务:

  • 最初,所有输入都具有正常的边框颜色。
  • 如果用户将输入修改为无效值,请将边框颜色设置为红色。
  • 如果用户单击提交按钮,则将所有无效输入的边框颜色设置为红色。

我是这样完成的:

input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid {
    border-color: #F00;
}

效果很好。现在我有一个提交异步请求的表单,如果服务器以成功状态响应,我想清除表单(并有效地将其重置为原始状态)。问题是当我清除表单时,它仍然有.ng-submitted 类,所以所有必填字段都有一个红色边框。但是我希望它们都有一个正常的边框。

我应该能够使用$setPristine() 将所有字段标记为原始字段,但我看不到任何将表单标记为未提交的方法。这可能吗,还是我需要为此创建和维护自己的类?

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    您可以使用以下 sn-p 重置表单并将其标记为 unsubmitted

    HTML:

    <input type="button" ng-click="reset(form)" value="Reset" />
    

    角度脚本:

    $scope.reset = function(form) {
        if (form) {
          form.$setPristine();
          form.$setUntouched();
        }
        $scope.user = angular.copy($scope.master);
      };
    

    这取自https://docs.angularjs.org/guide/forms

    【讨论】:

    • 我认为只需要form.$setPristine();
    • 谢谢!我没有意识到form.$setPristine() 也会将$submitted 设置为false。我仍然会使用form.$setUntouched(),因为从技术上讲,表单也应该被认为是未触及的。但是我不会使用 $scope.user 的东西,因为这看起来是特定于您引用的示例。
    • 没问题。我知道$scope.use 无关紧要,但我不想损害sn-p 的完整性。很高兴它对您有所帮助。
    猜你喜欢
    • 2015-03-31
    • 2016-04-04
    • 2015-03-03
    • 1970-01-01
    • 1970-01-01
    • 2014-11-07
    • 2016-02-19
    • 1970-01-01
    相关资源
    最近更新 更多