如何在 Angular 1.5 中重置表单答案

【问题标题】：how to reset a form in angular 1.5如何在 Angular 1.5 中重置表单
【发布时间】：2018-02-18 10:53:52
【问题描述】：

我有这个标记

如何在我的相应组件中重置它？

<form name="voiceForm" novalidate>...</form>

我试过了：

this.voiceForm.$setPristine();
self.voiceForm.reset();

但出现错误voiceForm is not defined.

这是我的组件：

(function (app) {
    app.component('voiceFormComponent', {
        templateUrl: 'partials/voice-form.html',
        controller: ['$scope', '$state', '$stateParams',
            function ($scope, $state, $stateParams) {

                var self = this;

                console.log("in voice prompt component");

                self.addVoice = function () {
                     self.voiceForm.$setPristine();
                     $state.go("add");
                }

【问题讨论】：

你是使用控制器作为语法还是控制器？
你试过重置按钮吗？
@Sajeetharan 我使用一个组件。我的坏
@SumitKumar 我想在用户按下“添加新”自定义按钮时清除表单。

标签： javascript angularjs forms

【解决方案1】：

您可以通过表单并致电setPristine

var app = angular.module('formReset', []);

app.controller('MainCtrl', function() {
this.data = {
name: ''
};

this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="formReset">

<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>

<body>
<div ng-controller="MainCtrl as ctrl">
 <form name="form" novalidate>
  <input name="name" ng-model="ctrl.data.name" placeholder="Name" required   />
  <input type="submit" />
  <button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>

<pre>

 Submitted: {{form.$submitted}}

</pre>
</div>

【讨论】：

我使用的是组件而不是控制器。
一样:)
我不想通过用户点击重置，但是当用户点击未嵌套在form中的按钮时
stackoverflow.com/questions/42157536/…
但这与我尝试过的有什么不同？ ` ctrl.userForm.$setPristine();` 他也在他的回答中使用了这个

【解决方案2】：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="myfrom">
      <input type="text" ng-model="data.name">
      <input type="text" ng-model="data.phone">
      <input type="text" ng-model="data.city">
      <input type="button" ng-click="reset_from()" value="reset">
    </form>
    {{data}}
  </body>

</html>

<script>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data = {name:"Sahed sawon",phone:"8801714999720",city:"Dhaka"};
  $scope.reset_from = function() {
    $scope.data = {};
  }
});

</script>

【讨论】：

【解决方案3】：

当我在表单中有一个表单（这是不允许的）时，我遇到了类似的问题，解决方法是使用ng-form 代替子表单。也许试试ng-form？

【讨论】：

我不同意，我有类似的问题，我建议的是解决我的问题。为什么不是问题的答案？