在提交时重置表单 [英] Reset form on submit

问题描述

我提交表单，然后将所有字段都设为空，但它不起作用。表格已成功提交，但字段未被重置。我正在使用角材料进行造型。

< md-input-container>
< label for =name>联络人名称< / label>
< input type =textmd-maxlength =20required =md-no-asterisk name =nameng-model =info.namemd-autofoucs>
< div ng-messages =myform.name。$ errorrole =alert>
< div ng-message =required>这是必需的。< / div>
< div ng-message =md-maxlength>名称长度不得超过20个字符。< / div>
< / div>
< / md-input-container>
< md-input-container>
< label for =phone>电话号码< / label>
< input type =textname =phonerequired md-no-asterisk ng-model =info.phone>
< div ng-messages =myform.phone。$ error>
< div ng-message =required>这是必需的。< / div>
< / div>
< / md-input-container>
< md-input-container>
< label for =email>电子邮件< / label>
< input type =textname =emailng-model =info.email>
< / md-input-container>
< md-input-container>
< md-button class =md-primaryng-click =saveit（info）>保存< / md-button>
< md-button class =md-primary>取消< / md-button>
< / md-input-container>

< / form>


**控制器中的函数**
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'，函数（$ scope，$ mdSidenav，$ mdDialog，$ mdToast，contacts）{

var vm = this;
$ scope.searchText =;

$ scope.toggleSidenav = function（）{
$ mdSidenav（'left'）。open（）;
};

contacts.getall（）函数（响应）{
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。电子邮件
}）;
$ 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（'请删除它！'）
.cancel（'我想保留它'。
$ mdDialog.show（confirm）.then（function（）{
contacts.deletethis（person.id）.then（function（）{
$ mdToast.show（

.content（Deleted！）
.position（'top，right'）
.hideDelay（2000）
）;

}）;
var index = $ scope.people.indexOf（person）;
$ scope.people.splice（index，1）;
}，function（）{
$ scope.status ='您决定保留您的债务。';
}）;
}; }）;

解决方案

您不使用 $范围和这个为控制器正确。您可以使用 $ scope 或控制器作为语法将范围与视图绑定。

我建议您阅读更多有关此处

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

  app.controller（'MainCtrl'，function（$ scope，$ mdSidenav，$ mdDialog，$ mdToast）{
 
 var vm = this; 
 vm.info = {} ; 
 
 //你休息的代码
 
 vm.saveit = function（）{
 //在这里做你的操作
 vm.info = { }; 
}; 
}）; 
  

更新您的html页面如下：

 < div ng-controller =MainCtrl as vm> 
< form name =myform> 
 
< md-input-container> 
< label for =name>联络人名称< / label> 
< input type =textng-maxlength =20required md-no-asterisk name =nameng-model =vm.info.namemd-autofoucs> 
< / md-input-container> 
< md-input-container> 
< label for =phone>电话号码< / label> 
< input type =textname =phonerequired md-no-asterisk ng-model =vm.info.phone> 
< / md-input-container> 
< md-input-container> 
< label for =email>电子邮件< / label> 
< input type =textname =emailng-model =vm.info.email> 
< / md-input-container> 
< md-input-container> 
< md-button class =md-primaryng-click =vm.saveit（）>保存< / md-button> 
< md-button class =md-primary>取消< / md-button> 
< / md-input-container> 
 
< / form> 
< / div> 
  

I am submitting a form and then making all the field empty but it's not working. Form is getting submitted successfully but the fields are not getting reset. I am using angular-material for styling. Updated controller.

 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.';
   });
   }; });

解决方案

You are not using $scope and this for controller correctly. You can use $scope or controller as syntax to bind your scope with view.

I suggest you to read more about it here.

Update your saveit() function inside controller as below:

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 = {};
  };
});

Update your html page as below:

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

这篇关于在提交时重置表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！