ng-disabled无效

Question

这可能是一个愚蠢的问题。但我刚刚开始尝试使用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>

Answer 1

显然，如果表单元素位于表格主体内，验证不起作用。

如果我将表格标签移到桌子外面，它可以正常工作。

谢谢大家。