Angularjs 1.4.7 - 送信後にフォームをクリアして元の状態に戻す

送信後、フォームが赤い枠線で表示され、送信テキストは表示されません。 $ setPristineや$ setUntouchedのさまざまな組み合わせをapp.jsの34行目に追加しようとしましたが、依然として送信テキストの緑色の枠が返されています。Angularjs 1.4.7 - 送信後にフォームをクリアして元の状態に戻す

$ scopeの使用についての記事を読みました。それが必要かどうかわからない、私はそれらに精通していない。 Redditに/ U/mcassagnesから

app.js

* the page hello-world auto-reloads the preview on the right c9 panel */ 
/* global angular */ /* angular is defined in html document as a src'ed js file. linter says to declare as a global in a comment here */ 
(function(){ 
    // variables are declared at the top of the function's scope 
    // three default entries to start with 
    var entries = [{ 
    title: 'Title1', 
    body: 'This is a test, 1.', 
    createdOn: 1397490980837 
    }, { 
    title: 'Title2', 
    body: 'This is a test, 2.', 
    createdOn: 1397490980837 
    }, { 
    title: 'Title3', 
    body: 'This is a test, 3.', 
    createdOn: 1397490980837 
    }]; 

    var app = angular.module('blogPosts', []); 

    app.controller('EntriesController', function(){ 
    // `this` entry, the current entry for this method, is defaulted to an empty object 
    this.entry = {}; 
    this.entries = entries; 

    // method is called when adding an entry 
    this.addEntry = function() { 
     // does this.entry exist here? good way to find out is with `console.log(this.entry);` or `debugger;` 
     this.entry.createdOn = Date.now(); 
     entries.push(this.entry); 
     console.log("entries",entries); 
     // reset `this.entry` back to an empty object 
     this.entry.$setPristine(); 
     this.entry = {}; 
     //this.entry.$setPristine = {}; 
     //this.entry.$clearForm = {}; 
    }; 
    }); 


})();

index.htmlを

<!DOCTYPE html> 
<html ng-app="blogPosts"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css" /><!-- load Bootstrap --> 
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/united/bootstrap.min.css" /><!-- load Bootstrap --> 
    <script src="angular.js"></script><!-- load angular --> 
    <script type="text/javascript" src="app.js"></script> 
    </head> 

    <body ng-controller="EntriesController as entryCtrl"> 

    <div ng-repeat="entry in entryCtrl.entries"> 
     <h3>{{entry.title}}</h3><cite class="clearfix">{{this.entry.createdOn | date}}</cite><br> 
     {{entry.body}} 
    </div> 

     <!-- Entry Form --> 
     <form name="entryForm" 
     ng-submit="entryForm.$valid &&entryCtrl.addEntry(entry)" 
     noValidate> 

     <!-- Live Preview --> 
     <blockquote> 
      <h3>{{entryCtrl.entry.title}}</h3><br> 
      {{entryCtrl.entry.body}}  
      <cite class="clearfix">{{this.entry.createdOn | date}}</cite> 
     </blockquote> 

     <!-- Entry Form --> 
     <h4>Submit an Entry</h4> 
     <fieldset class="form-group"> 
      <input type="title" class="form-control" placeholder="Title" title="Title" ng-model="entryCtrl.entry.title" required/> 
     </fieldset> 
     <fieldset class="form-group"> 
      <textarea class="form-control" placeholder="Write your entry.." title="Entry" ng-model="entryCtrl.entry.body" required></textarea> 
     </fieldset> 
     <fieldset class="form-group"> 
      <input type="submit" class="btn btn-primary pull-right" value="Submit Entry" /> 
     </fieldset> 
     </form> 

    </body> 

</html>

CSS

.ng-invalid.ng-dirty { 
    border-color: red; 
} 

.ng-valid.ng-dirty { 
    border-color: green; 
}

出典

2016-05-05 bardicwarrior

あなたは（[AngularJsフォームを送信し、$手付かずの状態をリセット]フォーム要素 –

の可能性のある重複上の$ setPristineを必要としますhttp://stackoverflow.com/questions/20490958/angularjs-submit-form-and-リセット初期状態） – jim31415

app.controller('EntriesController', ['$scope', function($scope){ 
    // ...  
    this.addEntry = function() { 
     // ... 
     $scope.entryForm.$setPristine(); 
    }; 
}]);

Works！

出典

2016-05-05 19:16:53 bardicwarrior

このthis.addEntryのこれは字句にバインドされていません。基本的にその拘束力を失った。これをメインコントローラ定義の変数に割り当てるのがベストです。これをコントローラーで抽象化するようなもの。この構文を使用する方法を変更する必要があることに注意してください。あなたのビューではEntryControllerがvmであり、変数の代わりにそれだけではvm.variableになります。私が意味することを固めるのを助けるためにここにstyle guideがあります。これがあなたの将来に役立つことを願っています。

app.controller('EntriesController', function() { 
    // `this` entry, the current entry for this method, is defaulted to an empty object 
    var vm = this; 
    vm.entry = {}; 
    vm.entries = entries; 

    // method is called when adding an entry 
    vm.addEntry = function() { 
     // does this.entry exist here? good way to find out is with `console.log(this.entry);` or `debugger;` 
     this.entry.createdOn = Date.now(); 
     entries.push(this.entry); 
     console.log("entries", entries); 
     // reset `this.entry` back to an empty object 
     vm.entry.$setPristine(); 
     vm.entry = {}; 
     //this.entry.$setPristine = {}; 
     //this.entry.$clearForm = {}; 
    }; 
    });

出典

2016-05-05 19:27:22 alphapilgrim

Angularjs 1.4.7 - 送信後にフォームをクリアして元の状態に戻す

答えて

関連する問題