myForm。$ valid＆myForm。$ invalidはアンギュラフォームで定義されていませんか？

Question

私はこのコードでng-disabledを設定しようとしているmyform &という名前のフォームがあります。

ng-disabled="myForm.$invalid" 

が、両方myForm.$invalid & myForm.$validは定義されていませんが。問題は何ですか？私はコンソール& myFormをチェックしてフォームに正しく設定されています。

UPDATE

<form id="commissionForm" name="myForm" class="form-horizontal"> 

      <div class="form-group"> 
       <div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" /> 
       <div class="col-sm-2 col-md-2 col-lg-2 col-xs-2" > 
        <button name="NextBtn" id="NextBtn" 
          ng-class="{disabled:commissionForm.$invalid}" 
          ng-disabled="myForm.$invalid" 
          ng-click="nextBtnClicked()" class="btn btn-primary" 
          >Next</button> 
       </div> 
      </div> 
</form> 

Answer 1

「myForm」を「commisionForm」に変更して機能させる必要があります。また、フォームには、ng-modelを使用して、モデルにバインドする要素が少なくとも1つ必要です。そうしないと、検証は実行されません。コードサンプルの作業

：

var app = angular.module('myApp', []); 
 
app.controller('myController', function($scope) { 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myController"> 
 
    <form id="commissionForm" name="commissionForm" class="form-horizontal"> 
 
    <div>form $valid: {{commissionForm.$valid}}</div> 
 
    <div>form $invalid: {{commissionForm.$invalid}}</div> 
 
    <div>An input box with max length 5, to make the form invalid:</div> 
 
    <input ng-maxlength="5" ng-model="somemodel"/> 
 
    <div class="form-group"> 
 
     <div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" /> 
 
     <div class="col-sm-2 col-md-2 col-lg-2 col-xs-2"> 
 
     <button name="NextBtn" id="NextBtn" ng-class="{disabled:commissionForm.$invalid}" ng-disabled="commissionForm.$invalid" ng-click="nextBtnClicked()" class="btn btn-primary">Next</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

フォームディレクティブ上の角度のドキュメントをチェックアウトフォームの検証に組み込まれている角度を利用したい場合は、次のフォームその

https://docs.angularjs.org/api/ng/directive/form

<form name="myForm" ng-controller="FormController" class="my-form"> 
    userType: <input name="input" ng-model="userType" required> 
    <span class="error" ng-show="myForm.input.$error.required">Required!</span><br> 
    <code>userType = {{userType}}</code><br> 
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code><br> 
    <code>myForm.input.$error = {{myForm.input.$error}}</code><br> 
    <code>myForm.$valid = {{myForm.$valid}}</code><br> 
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code><br> 
</form> 

注意しname属性は角度検証サービスにマップする必要があります。あなたのコードでそれを変更していないように見えます。

myFormはundefinedです。ご使用のコードによれば、フォーム名はcommissionFormではなく、myFormです。あなたが提供したコードから。