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

Question

我是 Angular JS 新手，并使用它作为我的客户端 JavaScript 框架。我想通知用户是否使用 HTML 元素成功提交了表单(不是用户需要单击“确定”才能继续输入的警报)。我使用 ngShow 在提交表单时显示元素。以下是该元素的代码。

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

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

$route.reload();

为了克服这个问题，我尝试不刷新页面。相反，我清空了 Controller 上的所有模型。然而，它对我来说效果不佳，因为我对所有输入使用 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 在提交的表单上显示成功消息？任何帮助将不胜感激。

Answer 1

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

...

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

...

将 $routeParams 注入(inject)您的 Controller 并进行相应的检查:

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