提交时重置表单

关注

发信

关注(28)粉丝(399)

提交时重置表单

本文介绍了提交时重置表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 Html<表单名称="myform"><md-输入-容器><label for="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">这是必需的.</div><div ng-message="md-maxlength">名称必须少于 20 个字符.</div>

</md-input-container><md-输入-容器><label for="phone">电话号码</label><input type="text" name="phone" required md-no-asterisk ng-model="info.phone"><div ng-messages="myform.phone.$error"><div ng-message="required">这是必需的.</div>

</md-input-container><md-输入-容器><label for="email">电子邮件</label><input type="text" name="email" ng-model="info.email"></md-input-container><md-输入-容器><md-button class="md-primary" ng-click="saveit(info)">保存</md-button><md-button class="md-primary">取消</md-button></md-input-container></表单>**控制器中的功能**angular.module('contact', ['ui.router', 'ngMaterial', 'templates','ngMessages']).config(['$mdThemingProvider', '$stateProvider', 函数 ($mdThemingProvider, $stateProvider) {$mdThemingProvider.theme('默认').primaryPalette('蓝色').accentPalette('橙色');$stateProvider.state('家', {网址:'',templateUrl: 'templates/home.html',控制器:'MainCtrl 作为 vm'});}]).controller('MainCtrl', function ($scope, $mdSidenav,$mdDialog,$mdToast, 联系人) {var vm = 这个；$scope.searchText ="";$scope.toggleSidenav = function(){$mdSidenav('left').open();};contacts.getall().then(function(response){控制台日志(响应数据)；$scope.people = response.data;});$scope.saveit = function(detail, myform){if (!detail.name || !detail.phone) { return ;}联系人.添加({名称:detail.name，电话:详细电话，电子邮件:detail.email});$mdToast.show($mdToast.simple().content("联系人已添加！").position('顶部，右侧').hideDelay(2000));$scope.people.push(detail);$scope.info = {};$scope.myform.$setPristine();$scope.myform.$setUntouched();};$scope.showConfirm = function(ev, person) {var confirm = $mdDialog.confirm().title('你确定吗?').ariaLabel('幸运日').targetEvent(ev).ok('请删除它！').cancel('我想保留它.');$mdDialog.show(confirm).then(function() {contacts.deletethis(person.id).then(function(){$mdToast.show($mdToast.simple().content("已删除！").position('顶部，右侧').hideDelay(2000));});var index = $scope.people.indexOf(person);$scope.people.splice(index,1);}，功能() {$scope.status = '你决定保留你的债务.';});};});

解决方案

您没有正确使用 $scope 和 this 作为控制器.您可以使用 $scope 或 controller as 语法将范围与视图绑定.

我建议您在此处阅读更多相关信息.

在控制器中更新您的 saveit() 函数，如下所示:

app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {var vm = 这个；vm.info = {};//你剩下的代码vm.saveit = 函数(){//在这里做你的操作vm.info = {};};});

更新您的 html 页面如下:


<表单名称="myform"><md-输入-容器><label for="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-输入-容器><label for="phone">电话号码</label><input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone"></md-input-container><md-输入-容器><label for="email">电子邮件</label><input type="text" name="email" ng-model="vm.info.email"></md-input-container><md-输入-容器><md-button class="md-primary" ng-click="vm.saveit()">保存</md-button><md-button class="md-primary">取消</md-button></md-input-container></表单>

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>

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

07-22 13:00