如何在角度1.5中重置表格

Question

I have this markup 我有这个标记

how can i reset it in my corresponding component? 如何在我的相应组件中重置它？

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

I have tried: 我努力了：

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

but got an error voiceForm is not defined. 但出现错误voiceForm未定义。

this is my component: 这是我的组件：

(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");
                }

Answer 1

You can pass the form and call setPristine 您可以传递表格并调用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>

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

Answer 3

I had a similar problem when I had a form within a form (which isn't allowed) and the fix was to use ng-form for the sub-form instead. 当我在表单中有一个表单（不允许）时，我遇到了类似的问题，解决方法是将ng-form用作子表单。 Perhaps try ng-form ? 也许尝试ng-form ？

如何在角度1.5中重置表格

问题描述

3 个解决方案

解决方案1
1 2018-02-18 11:13:25

解决方案2
0 2018-02-18 12:25:05

解决方案3
0 2018-02-19 11:12:02

如何在角度1.5中重置表格

问题描述

3 个解决方案

解决方案1 1 2018-02-18 11:13:25

解决方案2 0 2018-02-18 12:25:05

解决方案3 0 2018-02-19 11:12:02

解决方案1
1 2018-02-18 11:13:25

解决方案2
0 2018-02-18 12:25:05

解决方案3
0 2018-02-19 11:12:02