Question

即使尚未填写必填字段，我也有一个仍在运行提交代码的表单。在Chrome中，它会弹出＆＃34;请填写此字段＆＃34;，但仅限于文字输入（不是下拉列表），它仍会运行提交方法。我错过了一些非常明显的东西吗？

             <form name="newForm">
                <div class="section">
                    <div layout="row" class="inputRow">
                        <label for="itemA">ITEM A</label>
                        <input flex class="lineInput" ng-model="vm.contract.itemA" name="itemA" id="itemA" type="text" required />
                        <label for="itemB">ITEM B</label>
                        <select flex ng-model="vm.contract.contractType" name="itemB" id="itemB" required>
                            <option ng-repeat="type in vm.typeList">{{type}}</option>
                        </select>
                        <md-checkbox class="md-primary" aria-label="Checkbox No Ink" ng-model="vm.contract.itemC" name="itemC" id="itemC">
                            ITEM C
                        </md-checkbox>
                    </div>
                    <div layout="row" class="inputRow">
                        <label for="itemD">ITEM D</label>
                        <md-datepicker flex ng-model="vm.contract.itemD" id="itemC" name="itemC" md-placeholder="Enter date" required></md-datepicker>
                        <label for="itemE">ITEM E</label>
                        <md-datepicker flex ng-model="vm.contract.itemE" id="itemE" name="itemE" md-placeholder="Enter date"></md-datepicker>
                    </div>
                </div>
                <md-button type="submit" data-ng-click="vm.save()">Save and continue</md-button>
            </form>

Answer 1

在控制器内部的vm.save函数中，您必须输入以下内容：

if ($scope.newForm.$valid){
   execute your code....
}

希望有帮助=）

Answer 2

如果您要禁用Chrome执行自己的验证，而是设计自己的验证（例如，对于下拉列表），则需要在表单中包含novalidate属性。

其次，正如Gustavo指出的那样，您的表单通过angular附加了$valid / $invalid属性，可以通过多种方式使用：

停用保存按钮：

<md-button ng-disabled="newForm.$invalid" type="submit" data-ng-click="vm.save()">Save and continue</md-button>

使用ng-submit 将保存功能移至表单这允许您通过按Enter进行提交，比使用ng-click IMO更好。

<form name="newForm" ng-submit="newForm.$valid && vm.save()">

合并ng-disabled和ng-submit

<form name="newForm" ng-submit="vm.save()">
    <md-button ng-disabled="newForm.$invalid" type="submit">Save and continue</md-button>
</form>

这是最好的UX IMO

将其用于控制器

if ($scope.newForm.$valid){
   execute your code....
}

＆＃34;必需＆＃34;验证没有在AngularJS中禁用提交

2 个答案: