Question

我正在UI上工作，其中我在页面中有许多输入字段，这些输入字段未包含在form标记中。我只想在用户输入至少一个文本框值时启用提交按钮。当输入字段未包含在form标记中时，如何在angularjs / bootstrap中完成。演示：http://plnkr.co/edit/DqweKBeygIGvlui4HRs9?p=preview

示例代码：

    <div ng-app="myApp" ng-controller="myCtrl">
        <label>FirstName</label>
        <input type="text" name="name1" id="name1" ng-model="name1"/>
    <br>
            <label>Comments</label>
        <input type="text" name="comments" id="comments" ng-model="comments"/><br>
        <input type="submit" value="submit" ng-click="validateFields()">
    </div> 

<script>
var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope,$http){
  $scope.validateFields = function(){
    alert("validate"+ $scope.comments); 
  } 
});</script>

-编辑- 我在<ng-form>中包括了这些字段，突出显示了这些字段是必填字段，但是直到用户在出现的任何文本字段中输入一些文本之前，都不要禁用“提交”按钮。

包含<ng-form>中的字段的演示 http://plnkr.co/edit/slC4tx6AF8vuuOLsIOWn?p=preview

在上面的演示中，它说输入字段是必需的，但是它允许用户提交表单。我想禁用“提交”按钮，直到用户在一个文本字段中输入任何内容。

示例代码：

    <ng-form id="test" name="test" >

        <div ng-class="{'has-error': test.$invalid}" class="form-group">
            <label>FirstName</label>
            <input type="text" name="name1" required id="name1" class="form-control" ng-model="name1"/>
          <div class="help-block error" ng-show="test.name1.$error.required">Required</div>
          <br>

            <label>Comments</label>
            <input type="text" name="comments" required id="comments" ng-model="comments"/><br>
            <div class="help-block error" ng-show="test.comments.$error.required">Required</div>
        <input type="submit" value="submit" ng-click="validateFields()">

</div>              </ng-form>
    </div>

当输入字段未包含在表单标记中时验证表单

0 个答案: