Это может быть глупый вопрос. Но я только начал экспериментировать с AngularJS. Может кто-то указать, что я делаю неправильно в валидации. Кнопка не отключена, даже если поля недействительны.
Какая разница между ng-disabled="myForm.$invalid"
и
ng-disabled="myForm.cuisine.$invalid || myForm.title.$invalid || myForm.description.$invalid || myForm.cost.$invalid"
Я думаю, используя myForm.$invalid
- более чистый способ отключения кнопки. Какие-нибудь советы?
<form name="myForm">
<div class="form-group">
<select ng-required="true" name="cuisine" ng-model="model.food.cuisine" class="form-control" type="text">
<option ng-repeat="c in model.cuisines" value="{{c}}">{{c}}</option>
</select>
<p ng-show="myForm.cuisine.$invalid && myForm.cuisine.$touched">
Please select cuisine type.</p>
</div>
<div class="form-group">
<input ng-required="true" name="title" ng-minlength="4" ng-maxlength="25" ng-model="model.food.title"
type="text" class="form-control">
<p ng-show="myForm.title.$invalid && myForm.title.$touched">Please pick a valid title with atleast 4
characters.</p>
</div>
<div class="form-group">
<textarea ng-required="true" name="description" ng-minlength="10" ng-maxlength="255"
ng-model="model.food.description" type="text" class="form-control"></textarea>
<p ng-show="myForm.description.$valid && myForm.description.$touched">Please describe your food with 10 - 255
characters.</p>
</div>
<div class="form-group">
<input name="cost" ng-pattern="/0-9/" ng-required="true" min="1" ng-model="model.food.cost" type="number"
class="form-control" placeholder="Cost">
<p ng-show="myForm.cost.$error.pattern">Please enter a valid number</p>
<p ng-show="myForm.cost.$invalid && myForm.cost.$touched">Please enter cost of food item.</p>
</div>
<div class="form-group">
<button ng-disabled="myForm.$invalid" class="btn btn-success btn-block">Add Food</button>
</div>
</form>
По-видимому, проверки не работают, если элемент формы находится внутри тела таблицы.
Он отлично работает, если я переместил тег формы за пределы таблицы.
Всем спасибо.