Если свойства объекта JavaScript являются пустыми строками

Question

Я делаю форму в Angular JS и хочу, чтобы кнопка отправки была отключена (ng-disabled) до тех пор, пока модели, связанные с формой, не будут заполнены, что означает, что строки больше не пусты, а целые числа больше не равны нулю.

Работа с цифрами достаточно проста, но другие модели, которые не являются ценами, хранятся в одном объекте и все пустые строки. Я надеялся, что было простое однострочное решение, которое я мог бы использовать в ng-disabled, чтобы проверить, не содержит ли этот объект пустые строки для любых его свойств.

Во всяком случае, здесь какой-то код, чтобы понять:

<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="yourname@email.com"> 
</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> 

Объект выглядит следующим образом:

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

Так в основном, что бы я вместо Oproperties.containsEmptyString() который в настоящее время только концептуальное наполнитель ?

Answer 1

Вы можете обернуть все входы внутри form элемента с именем myForm, затем добавьте атрибут required к вашим входам, а затем установить

ng-disabled="myForm.$invalid"

вашей кнопку отправки.

Answer 2

Вы хотите, чтобы обернуть свои элементы в форме и переместить нг-клик = «submitOrder()» в форме на нг подать = «yourFormName. $ Действительный & & submitOrder()».

Это будет означать, что форма отправляется только в том случае, если все поле проверено правильно.