Question

嗨，我是angularjs的新手。我有一个表单接受来自用户的信息。（信息，如姓名，地址等...）我能够显示每个信息的验证，但问题是验证仍然存在，即使我使用$setUnTouched重置表单和$setPristine。我的代码出了什么问题。提前致谢

<div ng-controller="PersonController as pCtrl">
       <form name="personForm">
          <input type="text" class="form-control" name="firstName" ng-model="pCtrl.personForm.firstName " ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/"/>
           <div class="help-block" ng-messages="personForm.firstName.$error" ng-if="personForm.firstName.$touched">
              <p ng-message="">Your name is too short.</p>
              <p ng-message="pattern">Invalid. Input alphabetic characters</p>
              <p ng-message="required">First name is required.</p>
           </div>
          <button type="button" class="btn btn-warning">Cancel</button>
          <button type="button" class="btn btn-success" ng-click="pCtrl.resetForm(personForm)" >Save</button>
       </form>
</div>

在我的角色JS中

    var app = angular.module('myApp', ['ngAnimate','ng-slide-down', 'ngMessages']);
    app.controller('PersonController',function($scope, $http ) {
           var pCtrl = this;

          pCtrl.resetForm = function(form) {
                  form.$setPristine();
         }
    });

如你所见，我创建了一个名为＆＃34; resetForm＆＃34;的函数。设置名为＆＃34的表单; =

Answer 1

您可以在不使用UIViewController的情况下重置表单（我经常重置表单但从不使用该服务，但我会更多地了解它）。

重置表单价值的一种简单方法是在提交表单后将$setPristine <input>设置为空白对象或字符串，这将重置表单：

您的控制器功能：

ng-model

通常我会设置一个回调函数，发送到我的工厂，然后发送到服务器，然后重置表单。我将分享一个例子：

示例HTML：

pCtrl.resetForm = function(form) {
    pCtrl.personForm.firstName = ''; 
    // this will set `.firstName` to be empty and clear the form value.
        /* 
            Note: this assumes the original value has been passed 
            to the server already and it's OK to reset this value 
        /*
}

单击上面的<form ng-submit="create()"> <input type="text" ng-model="user" placeholder="Enter your name"> <input type="submit" value="Create User"> </form>按钮时，Create User将在控制器中运行（最终将数据汇集到工厂，然后工厂与服务器通信并将响应转回角度控制器）。

你可以在我的角度控制器中看到，我已经创建了一个回调对象，用于传递我希望在从服务器返回数据后运行的函数。这些功能在我的角度工厂中运行，我也将在控制器之后显示。

角度控制器示例：

create()

Angular Factory示例：

我省略了服务器控制器，但您可以在下面的工厂中看到，当app.controller('myController', ['$scope', 'myFactory', function($scope, myFactory) { // Callbacks var cb = { create: function(message) { console.log(message); $scope.user = {}; // this resets my user object and any form fields after user is created }, }; // Create User: $scope.create = function() { console.log('Create Process: Angular controller running...', $scope.user); userFactory.create($scope.user, cb.create); // see how both '$scope.user' and the 'cb.create' callback function are passed to factory? }; }]);运行时，它会转到服务器，生成新用户，然后运行回调来自上面，有效地重置用户字段。您将看到我的工厂方法的参数允许传递Angular Controller的回调参数：

create

我将展示app.factory('myFactory', ['$http', function($http) { // Setup Factory Object: var factory = {}; // Create: factory.create = function(user, createCallback) { $http.post('/user', user) // Note: server controller and `/user` route not shown .then(function(message) { createCallback(message.data); // this runs the callback function in our controller, // which resets the `$scope.user` object to an empty string. }) .catch(function(err) { console.log(err.data); }) }; // Return Factory Object: return factory; }]);服务的范围，但这是我教授重置表单的方式。只需将模型对象更改为空数组或字符串，由于Angular的双向数据绑定，您的表单值将清除。它很可爱。

$ setTouched和$ setPristine无效

1 个答案:

您的控制器功能：

示例HTML：

角度控制器示例：

Angular Factory示例：