ng-disabled无法正常工作

Question

This might be a silly question. But I just started experimenting with AngularJS. Can someone point out what I'm doing wrong in validation. The button is not disabled even when the fields are invalid.

What's the difference between ng-disabled="myForm.$invalid" and

ng-disabled="myForm.cuisine.$invalid || myForm.title.$invalid || myForm.description.$invalid || myForm.cost.$invalid"

I think using myForm.$invalid is a cleaner way of disabling the button. Any tips?

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

Answer 1

Apparently, validations don't work if the form element is inside the body of a table.

It works fine if I moved the form tag outside the table.

Thanks everyone.