ngModelディレクティブを使用する場合は未定義 - Angularjsコントローラ

ngPatternディレクティブを使用している場合、ngModelは未定義です。 ngPatternを削除すると、ngModelは期待どおりに動作します。 plnkrを参照してください。ngModelディレクティブを使用する場合は未定義 - Angularjsコントローラ

テキストボックスに値を入力するときにvm.conditionが表示されないが、ngPatternが削除されるとvm.conditionが期待通りに表示されることに注意してください。

HTML

<body ng-controller="MainCtrl as vm"> 
    <div ng-form="vm.frmTest"> 
     <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="/^(.+)$/g"> 
     <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid"> 
     <p ng-message="pattern">Error.</p> 
     </div> 
    </div> 
    <span>{{vm.condition}}</span> 
</body>

app.controller('MainCtrl', function($scope) { 
    this.condition = ''; 
});

注：これは、問題を示すダウン易しく書き直さバージョンです。私の指示は同じ問題を示しています。

出典

2016-11-18 garethb

この場合、「パターン」のみを使用してください。 – Icycool

私の答えはあなたの必要性を助けますか？ –

おそらく、あなたの指示文で使用しているパターン文字列のためです。 $scopeバインドして、あなたの指示を確認してください。

Demo Example

HTML：：

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.js"></script> 
     <script src="script.js"></script> 
    </head> 

    <body ng-controller="MainCtrl as vm"> 
    <div ng-form="vm.frmTest"> 
     <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="re"> 
     <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid"> 
     <p ng-message="pattern">Error.</p> 
     </div> 
    </div> 
    <span>{{vm.condition}}</span> 
    </body> 

</html>

JS：あなたはVMを使用するつもりなら

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

app.controller('MainCtrl', function($scope) { 
    this.condition = ''; 
    $scope.re = /^(.+)$/g; 
});

出典

2016-11-18 04:15:38

あなたはここに相対PLUNKER例を確認することができますビューであなたはdにする必要がありますあなたのコントローラのeclare VM。

var vm = this;

出典

2016-11-18 08:13:57 user9178

ngModelディレクティブを使用する場合は未定義 - Angularjsコントローラ

答えて

関連する問題