Angular JS在使用ng-model时从控制器清空表单输入字段答案

【问题标题】：Angular JS emptying form input field from controller when using ng-modelAngular JS在使用ng-model时从控制器清空表单输入字段
【发布时间】：2016-07-01 10:15:21
【问题描述】：

我有一个非常简单的表单，其中包含几个输入字段。这是一个：

            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

当我提交表单并从 AJAX 请求返回 true 时，我只想清空输入字段，但它不起作用。我可能错过了一些简单的东西..

这是我试图清空的控制器代码：

        $scope.signInData.firstName = '';

这是从范围中清空模型，我可以看到这是因为我正在控制台记录范围对象，但它并没有清空值。

我已经在 Google 上搜索了一段时间，并看到了诸如 $setPristine 方法之类的东西，但这些都不起作用。

编辑

    $http({
      url: 'sign_in_app',
      method: 'POST',
      data: {'firstName': signInData.firstName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }
    }

编辑 - 表格

    <form ng-submit="signIn(signInData)" id="signInForm" name="signInForm">
        <div ng-bind-html="errorSignIn" class="center error"></div>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

            <label class="item">
              <button class="button button-full button" type="submit">Sign in</button>
            </label>
         </div>
     </form>

编辑 3 - 更新的 HTTP 调用

    $http({
      url: '/sign_in/sign_in_app',
      method: 'POST',
      data: {'firstName': $scope.signInData.firstName, 'lastName': $scope.signInData.lastName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }

    }

【问题讨论】：

显示重置模型的完整代码上下文
你为什么在你的 ng-submit 上传递 signInData 以及你对那个对象做了什么？是否有可能以某种方式创建卷影副本？
你不能像那样传递signInData。你必须像 $scope.signInData.firstName 这样通过
@JamesG 试试这个：从 ng-submit 中删除 signInData，将你的 signIn 范围方法更改为不再需要它，使用 $scope.signInData 对象为你的 $http 调用设置所有值（顺便说一句，这可能应该在一项服务中让您的控制器更干净并遵循典型的 Angular 设计模式）然后查看您是否仍然存在表单输入未被清除的问题。
@JamesG 你的 Angular 控制器中是否有 $http() 调用？

标签： angularjs input angularjs-scope angular-ngmodel

【解决方案1】：

试试这个：从ng-submit 中删除signInData，将您的$scope.signIn() 方法更改为不再需要它，使用$scope.signInData 对象为您的$http 调用设置所有值（通过方式，可能应该在服务中保持您的控制器更干净并遵循典型的 Angular 设计模式），然后查看您是否仍然存在表单输入未被清除的问题。

我的怀疑是，因为您从那时起传递了signInData，所以您开始对范围对象的副本进行操作，这就是为什么清除属性的行为不像您预期的那样。

【讨论】：

【解决方案2】：

$setPristine 不会清理输入字段。您可以尝试使用 $scope.signInData = {};提交表单后

【讨论】：