AngularJSは、フォームがコントローラーで有効かどうかを確認します

86

フォームがコントローラーで有効かどうかを確認する必要があります。

見る：

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

私のコントローラーでは：

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

このエラーが発生します：

TypeError: Cannot read property '$valid' of undefined

angularjs

— ロバー
ソース

コントローラ内のsetBusinessInformation関数にラップしましたか？

— matsko 2013年

3

コードが断片化されすぎて何が間違っているのかを分析できません...問題を再現する簡単なデモをjsfiddle.netまたはplunkerで作成してください。フォームは範囲内BusinessCtrlですか？もっと見ないと分からない

— charlietfl 2013年

@matsko：いいえ。コントローラーの初期化時にこのコードを実行する必要があります。

— Rober 2013年

@charlietfl：それ以上はありません。例を単純化するために、いくつかのコードを削除します。はい、フォームはBusinessCtrlの範囲にする必要があります（コントローラがapp.js.内のルートに設定されている、私はしかし、以下の回答で私の解決策を追加し、このように動作していない理由を、私は知っているドント。。

— ローベル

109

これを試して

ビューで：

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

コントローラー内：

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

または

ビューで：

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

コントローラー内：

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

— ダムソリアン
ソース

フォーム内の複数のボタンを検証したい場合はどうすればよいですか？

— Fahad Mullaji 2015年

これは私にとってはうまくいきましたが、なぜ$scope.formName.$valid未定義になるのですか？

— ps0604 2016年

ng-ifを使用する場合、$ scope.formName。$ validは機能せず、ng-showを使用する場合、$ scope.formName。$ validは機能します。

— Vaibhav Shaha 2016

2

これが最良の答えであり、単純です。しかし、無効なフォームを処理できますか？どの入力が無効であるかをユーザーにどのように示すことができますか？

— ニコラスロイッチ2016

1

@ ps0604はformName.$validテンプレートでのみアクセスできます。コントローラーでアクセスする場合は、そのようなオブジェクトを$scope.forms.formNameテンプレートで作成する必要があります。<form name="forms.formName"> このコメントを確認してください

— Damsorian

29

コントローラを次のように更新しました：

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

— ロバー
ソース

また、フォームがモーダルの場合は、フォーム名をドット表記として宣言することを忘れないでください。例： "data.theform"そして、コントローラーで$ scope.data.theformとしてアクセスします

— Jasper

2

これは私にはうまくいきません。'createBusinessForm'をコントローラーの$ scopeに取り込む方法を示してください。

— cyrf 2016

$ scopeのことはなくなり、今ではvmアプローチを使用しています。構文アプローチとしてコントローラーを使用して、同じ回答のプランカーを作成できますか？私はそれをすることができません。それは、今日の文脈で答えを探している他の人にも役立つでしょう。ありがとう

— ankitd 2016年

14

これが別の解決策です

HTMLに非表示のスコープ変数を設定すると、コントローラーから使用できます。

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

これが完全な実例です：

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});

<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

スニペットを展開

— エンコデ
ソース

4

BusinessCtrl前に初期化されるcreateBusinessFormのFormController。ngControllerフォームにある場合でも、希望どおりに機能しません。これを助けることはできません（あなたはあなたを作成しngControllerDirective、優先順位をだまそうとすることができます）。これがangularjsの仕組みです。

たとえば、このplnkrを参照してください：http：//plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY？p = Preview

— オリバー
ソース