ng-disabled не работает

0

Это может быть глупый вопрос. Но я только начал экспериментировать с 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>
  • 1
    находится кнопка внутри формы div?
  • 0
    Да. По какой-то причине он не отображается </ form>
Показать ещё 2 комментария
Теги:
validation

1 ответ

0

По-видимому, проверки не работают, если элемент формы находится внутри тела таблицы.

Он отлично работает, если я переместил тег формы за пределы таблицы.

Всем спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню