Question

我是Angular JS的新手，并将其用作我的客户端JavaScript的框架。我想通知用户是否使用HTML元素成功提交表单（不是用户点击＆＃34;确定＆＃34;以便继续输入）的警报。我在提交表单时使用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在提交的表单上显示成功消息？任何帮助将不胜感激。

Answer 1

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

...

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

...

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

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

Answer 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>

Answer 3

好吧，没有重装，您可以在提交期间通过此代码清除表单。

engines

如果没有刷新页面，它会清除您的表单。

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

    $scope.yourFormModel = {};

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

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

3 个答案: