2016-11-12 5 views
0

入力フィールドは、テキストボックスなどの提出

var app = angular.module('myapp', ['ngMaterial']); 
 
app.controller('nameController', ['$scope', function($scope) { 
 
    alert("controller called"); 
 
    $scope.addNewName = function() 
 
    { 
 
    $scope.showSection = true; 
 
    }; 
 

 
    $scope.submit = function() { 
 
    alert("Added"); 
 
    $scope.adduserform.aname = ""; 
 
    $scope.showSection = false; 
 
    } 
 

 
}]);
<html ng-app="myapp"> 
 
<head> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
</head> 
 
<body> 
 
<div layout="row" ng-controller="nameController"> 
 
    <div> 
 
    <md-button aria-label="add" type="button" class="md-primary md-raised" ng-click="addNewName()">Add New Name</md-button> 
 
    </div> 
 

 
    <!-- below section will be shown when on click on Add New Name button --> 
 
    <form ng-show="showSection" name="adduserform"> 
 
    <label>Enter Name: </label> 
 
    <md-input-container> 
 
     <input type="text" ng-model="adduserform.aname" aria-label="name" id="aname" required/> 
 
    </md-input-container> 
 
    <md-button type="button" aria-label="submit" class="md-primary md-raised" ng-click="submit()">Submit</md-button> 
 
    </form> 
 
</div> 
 
    <!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    
 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    
 
    
 
    
 
</body> 
 
</html>

入力フィールド、選択を提出するにはクリアされませんにクリアされません。フィールドはng-modelによって参照され、コードで$scope.modelnameとして使用されます。私がsubmitをクリックした後 - 私は$scope.modelname=''でそれらをクリアします。
ページを更新せずにフォームを再度開くと、フィールドが赤く強調表示されます。
フォームが[ユーザーの追加]フォームに似ているとします。最初のユーザーのためにsubmitをクリックし、別のユーザーを追加するためにフォームを再度開きます。フォームを再度開くと、フィールドが強調表示されます。フィールドが必要とされているので、このエラーが発生するので、私はそのことを知っています。どのように私はそれらをクリアする必要がありますまた、私はフォームを再度開くときにフィールドが強調表示されていないことを確認?私を助けてください。

答えて

0

$ scope.modelname = {}を試してください。 それ以外の場合は、スコープを試してみてください。$$ nextSibling.modelname = '';これは

+0

んが、それdoesntの仕事を助けていないかどう

は、私を知ってみましょう。 {}は[Object Object]をフィールドに設定し、nextSibling - は問題と同じように動作します。それは値をクリアしますが、フォームが再オープンされたときにfidlがハイライト表示されます –

+0

可能であれば、jsfiddleまたはplunkerでコードを実行して、ここにそのリンクを与えてください。これは助けになります –

+0

私はこのFiddleを初めて使っています.. Pls forgive 。元の投稿にサンプルコードを追加しました。私に知らせてください –

関連する問題