Question

当我点击添加按钮以在下次添加记录时，最后的表单数据以表格形式出现，在bootstrap表单模型中不明确。

 $scope.saveAdd = function () {
    $http({
        method: 'post',
        url: 'user/insert',
        data: $scope.form,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data)
    {
        if (data == 1) {

            $scope.user_succ = $scope.user_succ ? false : true;
            $scope.succ = "User added successfully";
            $timeout(function () {
                $(".modal").modal("hide");
            }, 3000);
        } else if(data == 3) {
             $scope.confirm_password=$scope.confirm_password ? false :true;
             $scope.confirm_password_error="Confirm Password is Not Matched";

        }else{
            $scope.user_err = $scope.user_err ? false : true;
            $scope.err = "User insertion failed! Try again.";
        }
    });
};

我的浏览页面： - 这是我的视图页面，从angularjs routes.js.加载。如果您发现任何错误错误，请给我一些反馈。或任何其他angularjs验证，请与我分享。

<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
   <div class="modal-body">
      <div class="form-group">
           <label for="name" class="col-form-label">Name<span class="text-danger">*</span></label>
     <input type="text" class="form-control" ng-model="form.name" id="name" name="name" placeholder="Enter Name" required>
      <span style="color:red" ng-show="addItem.name.$touched && addItem.name.$invalid">Please Enter User Name.</span>
         </div>
     <div class="form-group">
         <label for="phone" class="col-form-label">Phone Number<span class="text-danger">*</span></label>
      <input type="text" class="form-control" ng-model="form.phone" id="phone" name="phone" placeholder="Enter Phone Number" required="">
     <span style="color:red" ng-show="addItem.phone.$touched && addItem.phone.$invalid">Please Enter Phone Number.</span>
                                                </div>
     <div class="form-group">
     <label for="usertype" class="col-form-label">User Type<span class="text-danger">*</span></label>
        <select class="form-control" ng-model="form.type" id="type" name="type" required="">
        <option value="">Select a user type</option>
              <option value="branch">Branch Admin</option>
              <option value="manager">Branch Manager</option>
      </select>
    <span style="color:red" ng-show="addItem.type.$touched && addItem.type.$invalid">Select User Type.</span>
         </div>
     <div class="form-group">
      <label for="address" class="col-form-label">Address</label>
         <textarea class="form-control" ng-model="form.address" id="address" name="address" placeholder="Enter Address" required=""></textarea>
     <span style="color:red" ng-show="addItem.address.$touched && addItem.address.$invalid">Please Enter Address.</span>
     </div>
      <div class="form-group">
        <label for="username" class="col-form-label">Username<span class="text-danger">*</span></label>
       <input type="text" class="form-control" ng-model="form.username" id="username" name="username" placeholder="Enter Username" required="">
       <span style="color:red" ng-show="addItem.username.$touched && addItem.username.$invalid">Please Enter Username.</span>
      </div>
      <div class="form-group">
        <label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
       <input type="password" class="form-control"  ng-model="form.password" placeholder="Password" name="password" required="required" ng-minlength="6"/>
      <div ng-if="addItem.password.$touched || signupSubmitted">
        <p style="color:red" ng-show="addItem.password.$error.required" class="help-block">Password is required</p>
      <p style="color:red" ng-show="addItem.password.$error.minlength" class="help-block">Minimum 6 character</p>
             </div>
      </div>

     <div class="form-group">
         <label for="recipient-name" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
       <input type="password" class="form-control"  name="confirm_password"  ng-model="form.confirm_password" placeholder="Confirm password" match-password="password" required>

      <div ng-if="addItem.confirm_password.$touched || signupSubmitted">
        <p style="color:red" ng-show="addItem.confirm_password.$error.required" class="help-block">Confirm password is required</p>
     <p style="color:red" ng-show="confirm_password" >{{confirm_password_error}}</p>

            </div>
       </div>

     </div>
     <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="submit" class="btn btn-primary" >Submit</button>

    </div>
</form>`

Answer 1

它的工作。有轻微的改变。

$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine(); 
$scope.NameofFormSubmitted.$setUntouched();

Answer 2

原因是您之前与模型绑定的值仍然存在。所以，你可以做两件事：

在控制器中注入$route并在$route.reload()上执行ng-submit，然后重新加载路由。
通过创建和调用清除数据的函数来重新初始化模型。Use $scope.formName.$setPristine() if you have validation depending on this pristine state of form

注意： $route.reload()会重新加载您的路线，因此您的控制器中的所有更改都将被还原。所以选择相应的。

Answer 3

您可以尝试重置功能，重置您的表单字段。但这不是准确的解决方案。请提供完整的控制器和 HTML 代码，以便制作出准确的解决方案。

$scope.resetForm = function(){
   /* reset the data to a new object so that all the properties
    * of form are reset
    */
    $scope.data = {};
  };

<强>更新
根据部分HTML代码，您可以尝试使用表单控制器API setPristine：$scope.FORMNAME.$setPristine();

将 FORMNAME 替换为您的表单名称。另请注意，由于表单将模型对象绑定到输入，因此您需要注意清除这些输入模型：

$scope.formData = {};

希望这有助于解决你的问题：）

Answer 4

我认为你在寻找的是：

$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine(); 
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events

在angularjs中提交后清除表单输入字段..？

4 个答案: