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

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

如果我将表单标签移到表格外，效果很好。

谢谢大家。