Summer Developer Summer Developer - 1 month ago 8
AngularJS Question

If JavaScript Object Properties Are Empty Strings

I am making a form in Angular JS and want the submit button to be disabled (

ng-disabled
) until the models associated with the form are all populated, meaning that the strings are no longer empty and the integers are no longer zero.

Dealing with the numbers is easy enough, but the other models that aren't prices are all stored in one object, and are all empty strings. I was hoping there was an easy one line solution I could use in an
ng-disabled
to test if this object no longer contained empty strings for any of its properties.

Anyway, here is some code to make it clear:

<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>


The object looks like:

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


So basically, what would I do instead of
Oproperties.containsEmptyString()
which is currently just conceptual filler?

Answer

You can wrap all your inputs inside a form element named myForm, then add the required attribute to your inputs and then set

ng-disabled="myForm.$invalid"

to your submit button.

Comments