Angularjs 提交时重置表格

我正在提交一个表单，然后将所有字段清空，但它不起作用。表单已成功提交，但未重置字段。我使用角材料的造型。更新控制器

 Html

 <form name="myform">
        <md-input-container>
        <label for="name">Contact Name</label>
        <input type="text" md-maxlength="20" required="" md-no-asterisk  name="name" ng-model="info.name" md-autofoucs>
        <div ng-messages="myform.name.$error" role="alert">
      <div ng-message="required">This is required.</div>
      <div ng-message="md-maxlength">The name has to be less than 20 characters long.</div>
      </div>
    </md-input-container>
    <md-input-container>
        <label for="phone">Phone Number</label>
        <input type="text" name="phone" required md-no-asterisk ng-model="info.phone">
        <div ng-messages="myform.phone.$error">
       <div ng-message="required">This is required.</div>
       </div>
    </md-input-container>
    <md-input-container>
        <label for="email">Email</label>
        <input type="text" name="email" ng-model="info.email">
    </md-input-container>
    <md-input-container>
    <md-button class="md-primary" ng-click="saveit(info)">Save</md-button>
    <md-button class="md-primary">Cancel</md-button>
     </md-input-container>

</form>


 **Function in Controller**
 angular.module('contact', ['ui.router', 'ngMaterial', 'templates','ngMessages'])
   .config(['$mdThemingProvider', '$stateProvider', function ($mdThemingProvider, $stateProvider) {

 $mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('orange');

$stateProvider
         .state('home', {
           url: '',
           templateUrl: 'templates/home.html',
           controller: 'MainCtrl as vm'

         });

   }]).controller('MainCtrl', function ($scope, $mdSidenav,$mdDialog,$mdToast, contacts) {

     var vm = this;
     $scope.searchText ="";

      $scope.toggleSidenav = function(){
      $mdSidenav('left').open();
    };

    contacts.getall().then(function(response){
    console.log(response.data);
     $scope.people = response.data;
    });

    $scope.saveit = function(detail, myform){

        if (!detail.name || !detail.phone) { return ;}

          contacts.add({
            name: detail.name,
            phone: detail.phone,
            email: detail.email
          });
          $mdToast.show( 
          $mdToast.simple()
          .content("ContactAdded!")
          .position('top, right')
          .hideDelay(2000)
          );
          $scope.people.push(detail);
        $scope.info = {};
          $scope.myform.$setPristine();
          $scope.myform.$setUntouched();

    };

    $scope.showConfirm = function(ev, person) {
    var confirm = $mdDialog.confirm()
      .title('Are you sure?')
      .ariaLabel('Lucky day')
      .targetEvent(ev)
      .ok('Please delete it!')
      .cancel('I want to keep it.');
    $mdDialog.show(confirm).then(function() {
      contacts.deletethis(person.id).then(function(){
      $mdToast.show( 
        $mdToast.simple()
          .content("Deleted!")
          .position('top, right')
          .hideDelay(2000)
          );

       });
       var index = $scope.people.indexOf(person);
           $scope.people.splice(index,1);
    }, function() {
   $scope.status = 'You decided to keep your debt.';
   });
   }; });

Html
联系人姓名
这是必需的。
名称长度必须少于20个字符。
电话号码
这是必需的。
电子邮件
拯救
取消
**控制器中的函数**
angular.module（'contact'、['ui.router'、'ngMaterial'、'templates'、'ngMessages']））
.config（['$mdThemingProvider'，'$stateProvider'，函数（$mdThemingProvider，$stateProvider）{
$mdThemingProvider.theme（'default'）
.primaryPalette（“蓝色”）
.accentPalette（“橙色”）；
$stateProvider
.州（“家”{
url:“”，
templateUrl:'templates/home.html'，
控制器：“MainCtrl作为虚拟机”
});
}]).controller（'MainCtrl'，function（$scope、$mdSidenav、$mdDialog、$mdToast、contacts）{
var vm=这个；
$scope.searchText=“”；
$scope.toggleSidenav=function（）{
$mdSidenav（'left'）.open（）；
};
contacts.getall（）.then（函数（响应）{
console.log（response.data）；
$scope.people=response.data；
});
$scope.saveit=函数（详细信息，myform）{
如果（！detail.name | |！detail.phone）{return；}
联系人。添加({
name:detail.name，
电话：detail.phone，
电子邮件：detail.email
});
$mdToast.show（
$mdToast.simple（）
.content（“ContactAdded！”）
.位置（“顶部，右侧”）
hideDelay先生（2000年）
);
$scope.people.push（细节）；
$scope.info={}；
$scope.myform.$setPristine（）；
$scope.myform.$setUntouched（）；
};
$scope.showConfirm=功能（ev，个人）{
var confirm=$mdDialog.confirm（）
.title（'你确定吗？'）
.ariaLabel（“幸运日”）
.目标事件（ev）
.ok（'请删除它！'）
.取消（'我想保留它'）；
$mdDialog.show（confirm）.then（function（）{
contacts.deletethis（person.id）.然后（function（））{
$mdToast.show（
$mdToast.simple（）
.content（“已删除！”）
.位置（“顶部，右侧”）
hideDelay先生（2000年）
);
});
var索引=$scope.people.indexOf（person）；
$scope.people.splice（索引1）；
}，函数（）{
$scope.status='您决定保留您的债务'；
});
}; });

在保存表单后，给$setPristine重置表单

$scope.myform.$setPristine();

---

您没有正确地将

$scope

和

此

用于控制器。您可以使用

$scope

或

控制器as

语法将您的作用域与视图绑定

我建议你多读一些

更新控制器中的saveit（）函数，如下所示：

app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {

  var vm = this;
  vm.info = {};

  //your rest the code

  vm.saveit = function() {        
    //do your operations here
    vm.info = {};
  };
});

<div ng-controller="MainCtrl as vm">
 <form name="myform">

    <md-input-container>
      <label for="name">Contact Name</label>
      <input type="text" ng-maxlength="20" required md-no-asterisk name="name" ng-model="vm.info.name" md-autofoucs>
    </md-input-container>
    <md-input-container>
      <label for="phone">Phone Number</label>
      <input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone">
    </md-input-container>
    <md-input-container>
      <label for="email">Email</label>
      <input type="text" name="email" ng-model="vm.info.email">
    </md-input-container>
    <md-input-container>
      <md-button class="md-primary" ng-click="vm.saveit()">Save</md-button>
      <md-button class="md-primary">Cancel</md-button>
    </md-input-container>

  </form>
</div>

更新您的html页面，如下所示：

app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {

  var vm = this;
  vm.info = {};

  //your rest the code

  vm.saveit = function() {        
    //do your operations here
    vm.info = {};
  };
});

<div ng-controller="MainCtrl as vm">
 <form name="myform">

    <md-input-container>
      <label for="name">Contact Name</label>
      <input type="text" ng-maxlength="20" required md-no-asterisk name="name" ng-model="vm.info.name" md-autofoucs>
    </md-input-container>
    <md-input-container>
      <label for="phone">Phone Number</label>
      <input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone">
    </md-input-container>
    <md-input-container>
      <label for="email">Email</label>
      <input type="text" name="email" ng-model="vm.info.email">
    </md-input-container>
    <md-input-container>
      <md-button class="md-primary" ng-click="vm.saveit()">Save</md-button>
      <md-button class="md-primary">Cancel</md-button>
    </md-input-container>

  </form>
</div>

联系人姓名
电话号码
电子邮件
拯救
取消

另一种方法

app.controller（'MainCtrl'，函数（$scope、$mdSidenav、$mdDialog、$mdToast）{
var vm=这个；
vm.info={}；
vm.saveit=函数（$event）
{        
var form=angular.element（$event.target）.parent（“form”）[0]；
如果（form！==未定义）form.reset（）；
};
});

联系人姓名
电话号码
电子邮件
拯救
取消

下面的答案缺少一行正常工作的代码

您可以在此处查看另一个问题的答案：

应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.info={}；//姓名、电话、电子邮件
$scope.saveit=function（）{
$scope.info.name=''；//重置名称
$scope.info.phone=''；//重置电话
$scope.info.email=''；//重置电子邮件
//重置表单并禁用错误消息
$scope.myform.$setPristine（）；
$scope.myform.$setUntouched（）；
};
});

可能有助于您为代码创建plunker。请在此处共享完整的代码github链接-仅共享此视图的html文件和控制器代码。未定义的$scope.myform