我正在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="[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>
该对象看起来像:
$scope.Oproperties=
{
pickupDate:"",
firstName:"",
lastName:"",
phone:"",
email:""
}
因此,基本上,我将做什么,而不是Oproperties.containsEmptyString()
目前只是概念填充物?
您可以将所有输入包装在form
名为的元素中myForm
,然后将required
属性添加到输入中,然后进行设置
ng-disabled="myForm.$invalid"
到您的提交按钮。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句