Angular JS - 如果使用 HTML 元素成功提交表单，则通知用户

Posted 2023-05-09

【中文标题】Angular JS - 如果使用 HTML 元素成功提交表单，则通知用户

【英文标题】：Angular JS - Notify the user if form is successfully submitted using HTML element

【发布时间】：2017-10-17 16:00:30

【问题描述】：

我是 Angular JS 的新手，并将它用作我的客户端 javascript 的框架。如果表单使用 html 元素成功提交，我想通知用户（不是用户需要单击“确定”才能继续输入的警报）。我使用ngShow 在提交表单时显示元素。下面是元素的代码。

<p ng-model="successMessage" ng-show="isSuccess"></p>

但是，它不适合我，因为我在用户成功提交表单后刷新页面。如您所知，这将导致$scope 中的变量刷新。

$route.reload();

为了克服这个问题，我尝试不刷新页面。相反，我清空了控制器上的所有模型。然而，它对我来说效果不佳，因为我使用 Angular 表单验证，即 !frmRegister.address.$pristine 和 frmRegister.address.$invalid 用于我的所有输入。使用这些，如果用户触摸了输入元素，我将显示错误消息，但输入内容仍然不正确。下面是例子。

<div class="form-group row" ng-class=" 'has-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine "> 
    <label class="col-2 col-form-label">Employee Name</label>
    <div class="col-10">
        <input class="form-control" ng-class=" 'form-control-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine " type="text" placeholder="Enter name..." id="txtName" name="name" ng-model="name" ng-maxlength="50" required autofocus>
        <p ng-show="frmRegister.name.$invalid && !frmRegister.name.$pristine" class="form-control-feedback">Name is required.</p>
        <p ng-show="frmRegister.name.$error.maxlength" class="form-control-feedback">Name is too long.</p>
    </div>
</div>

由于我没有刷新页面而只是清空模型，因此由于输入已被触摸而引发错误消息。

如何使用 Angular 在提交的表单上显示成功消息？任何帮助将不胜感激。

【问题讨论】：

您使用的是ng-route 还是ui-router？

@couzzi 我正在使用ng-route

所以我的理解是，您可以显示您的成功消息，但由于$route.reload 而刷新，所以您唯一的方法是不刷新页面，然后您会遇到表单错误的问题模式什么时候你只会清除它而不刷新？我做对了吗？

@JkAlombro 是的，没错

@DarrenChristopher 检查我的答案 :)

【参考方案1】：

如果$route.reload 很重要，您也可以在重新加载之前添加?success=true 或类似您的路线：

...

$route.updateParams(success:"true");
$route.reload();

...

将$routeParams 注入您的控制器并进行相应检查：

function Controller($scope, $routeParams) 
    if($routeParams && !!$routeParams.success)
       $scope.showSuccessMessage = true;
    

【讨论】：

嗨，我已经尝试过了，它正在工作，但是，我想在页面刷新时删除参数?success=true。我该怎么做？

所以，参数只会出现在第一次刷新时（即当$route.reload()被调用时，而不是当用户手动按下刷新时。有可能实现吗？

【参考方案2】：

<p> 标签不支持ng-model，你必须使用ng-bind。如果您成功更改了isSuccess 的值，我认为它将显示为ng-bind。

请参考以下关于ng-model 和ng-bind 的示例。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="data='test';iSuccess=true;">
  <h3>Shown nothing by ng-model</h3>
  <p ng-model="data" ng-show="iSuccess"></p>
  <h3>Shown by ng-bind</h3>
  <p ng-bind="data" ng-show="iSuccess"></p>
  <button ng-click="iSuccess=!iSuccess">Toggle</button>
</div>

【讨论】：

示例令人困惑

@charlietfl 我刚刚意识到这一点，我对其进行了修改以使其易于理解。希望我已经说得够清楚了。

谢谢！我才意识到，知道它会很有帮助！然而，这不是问题。

【参考方案3】：

好吧，无需重新加载， 您可以在提交期间通过此代码清除表单。

    $scope.yourFormModel = ;

    $scope.yourFormName.$setPristine(true);
    $scope.yourFormName.$setUntouched(true);

它会在不刷新页面的情况下清除您的表单。

另外，在您的成功消息中，请改用此代码

<div ng-show="isSuccess">
      successMessage
</div>