2016-10-31 13 views
0

私はAngular JSでフォームを作成していますが、フォームに関連付けられたモデルがすべて入力されるまで、送信ボタンを無効にする必要があります。整数はもはやゼロではありません。JavaScriptオブジェクトのプロパティが空の文字列の場合

数字の扱いは簡単ですが、価格ではない他のモデルはすべて1つのオブジェクトに格納され、すべて空文字列です。私は、ng-disabledでこのオブジェクトがそのプロパティのいずれかに空の文字列を含んでいないかどうかをテストするために使用できる簡単な1行のソリューションがあることを期待していました。現在、ちょうど概念充填材であるので、基本的に

$scope.Oproperties= 
    { 
    pickupDate:"", 
    firstName:"", 
    lastName:"", 
    phone:"", 
    email:"" 
    } 

、私はOproperties.containsEmptyString()するのではなく、どうなるのか:

<div class="form-group"> 
    <label for="pickupDate" style="margin-top: 10px;">Pickup Date</label> 
    <select name="pickupDate" ng-model="Oproperties.pickupDate"> 
     <option value="Tuesday">Tuesday - November 22nd</option> 
     <option value="Wednesday">Wednesday - November 23rd</option> 
     <option value="Thursday">Thursday - November 24th</option> 
    </select> 
</div> 
<div class="form-group clear-fix"> 
    <div class="form-group" style="width:45%;float:left;"> 
     <label for="firstName">First Name</label> 
     <input type="text" class="form-control" ng-model="Oproperties.firstName" placeholder="Jill"> 
    </div> 
    <div class="form-group" style="width:45%;float:right;"> 
     <label for="lastName">Last Name</label> 
     <input type="text" class="form-control" ng-model="Oproperties.lastName" placeholder="Smith"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="phone">Phone</label> 
    <input type="text" class="form-control" ng-model="Oproperties.phone" placeholder="Phone Number"> 
</div> 
<div class="form-group"> 
    <label for="email">Email</label> 
    <input type="text" class="form-control" ng-model="Oproperties.email" placeholder="[email protected]"> 
</div> 
<div class="form-group" ng-repeat="(key, value) in breads | groupBy: 'Type'"> 
    <label class="itemTitle">@{{key}}</label> 
    <div ng-repeat="bread in value"> 
     <label for="@{{bread.Name}}">@{{bread.Name}}</label> 
     <select name="@{{bread.Name}} quantity" ng-options="quantityOption as quantityOption.value for quantityOption in quantityOptions track by quantityOption.value" ng-model="bread.quantity" ng-change="calculate()"></select> 
     </select> 
     <p class="price">@{{bread.Price|currency}} @{{bread.details}}</p> 
    </div> 
</div> 
<button ng-disabled="Oproperties.containsEmptyString()&&totalPrice===0" ng-click="submitOrder()" class="btn btn-default">Submit</button> 

をオブジェクトは次のようになります。

とにかく

、ここでいくつかのコードは、それを明確にすることです?

+1

インラインスタイルを削除する必要があります – user2182349

答えて

2

あなたは、myFormという名前form要素内のすべての入力をラップし、あなたの入力にrequired属性を追加してから送信ボタンを

ng-disabled="myForm.$invalid"

を設定することができます。

+0

ボタンを無効にしても、そのボタンで実行されているクリックハンドラは停止しません。 –

+0

?はい、そうです –

0

あなたの要素をフォームにラップし、ng-click = "submitOrder()"をng-submit = "yourFormName。$ valid & & submitOrder()でフォームに移動したいとします。

これは、すべてのフィールドが正しく検証された場合にのみフォームが送信されることを意味します。

関連する問題