提出時にフォームをリセット

Question

フォームを送信していて、すべてのフィールドを空にしていますが、動作していません。フォームは正常に送信されますが、フィールドはリセットされません。私は、スタイリングに角度素材を使用しています。更新されたコントローラ。

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

Answer 1

あなたは正しくコントローラの$scopeとthisを使用していません。スコープをビューにバインドするには、$scopeまたはcontroller asの構文を使用できます。

詳細については、hereをお読みください。

以下のように、コントローラ内部のあなたのsaveit（）関数を更新します。以下のように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> 

Answer 2

$ setPristineに保存後にフォームをリセットするように指定します。

$scope.myform.$setPristine(); 

Answer 3

別のアプローチ

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

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

    vm.saveit = function($event) 
    {   
    var form = angular.element($event.target).parent("form")[0]; 
    if (form !== undefined) form.reset(); 
    }; 
}); 

<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($event)">Save</md-button> 
        <md-button class="md-primary">Cancel</md-button> 
       </md-input-container> 

      </form> 
     </div> 

Answer 4

を答え下に1つがありませんl適切

を動作するようにコードのINEあなたは右ここ別の質問からの回答を確認することができます。

https://stackoverflow.com/a/40267630/4767208

Answer 5

<form name="myform"> 
    <input type="text" ng-model="info.name"> 
    <input type="text" ng-model="info.phone"> 
    <input type="text" ng-model="info.email"> 
</form> 

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

    $scope.info = {}; // name, phone, email 

    $scope.saveit = function() { 
    $scope.info.name = ''; // reset name 
    $scope.info.phone= ''; // reset phone 
    $scope.info.email= ''; // reset email 

    // reset form and disable error messages 
    $scope.myform.$setPristine(); 
    $scope.myform.$setUntouched(); 
    }; 

});