在AngularJS中将表单标记为未提交

AJ *_*son 7 angularjs

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

背景:

在我的CSS中,我使用角度验证类来完成以下操作:

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

我是这样完成的:

input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid {
    border-color: #F00;
}
Run Code Online (Sandbox Code Playgroud)

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

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

Ore*_*aki 10

您可以重置表单,然后unsubmitted使用以下代码片段将其标记为.

HTML:

<input type="button" ng-click="reset(form)" value="Reset" />
Run Code Online (Sandbox Code Playgroud)

角度脚本:

$scope.reset = function(form) {
    if (form) {
      form.$setPristine();
      form.$setUntouched();
    }
    $scope.user = angular.copy($scope.master);
  };
Run Code Online (Sandbox Code Playgroud)

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

  • 我认为只需要`form.$ setPristine();`. (2认同)
  • 谢谢!我没有意识到`form.$ setPristine()`也会将`$ submitted`设置为`false`.我仍然会使用`form.$ setUntouched()`,因为表格在技术上也应该被认为是不受影响的.但是我不会使用`$ scope.user`这些东西,因为它看起来像是你引用的例子. (2认同)