1

我创建动态表单NG-重复。根据用户标识值,我正在获得表单字段。一旦填好表单中的每个字段,我的添加用户按钮应该被启用。截至目前尚未启用。下面附上了我的代码。与形式与NG-重复指令angularjs

我的html代码:

<div ng-app="myApp"> 

<div ng-controller="myCtrl"> 
    <form role="form" name='userForm' novalidate> 
     <div class="container"> 
      <div class="row" ng-repeat="myid in userid"> 

       <div class="form-group"> 
        <div class="col-md-3"> 
         <label>ID</label> 
         <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled> 
        </div> 
        <div class="col-md-3"> 
         <label>Comments</label> 
         <textarea ng-model="manualComment" id="textarea1" rows="1"></textarea> 
        </div> 

        <div class="col-md-3 "> 
         <label>Gender</label> 

         <select ng-model="gender" name="select2"> 
          <option value="male">Male</option> 
          <option value="female">Female</option> 

         </select> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="buttonContainer text-center btn-container"> 
      <br> 
      <button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button> 
      <button type="button" class="btn button--default btn--small pull-center">Close</button> 
     </div> 
    </form> 
</div> 

我app.js文件

var myApp = angular.module('myApp', []); 
myApp.controller('myCtrl', function($scope) { 
$scope.userid = [1, 2, 3] 
}); 

如何启用添加用户按钮,一旦所有领域都充满?

+0

你可能需要'NG-disabled' – nadavvadan

回答

0

更新:

如果你想你的初始阵列从服务器转换为使用数组如果你想它包含所有形式值的对象检查此琴

JSFiddle Demo

请参阅下面的小提琴!

JSFiddle Demo

基于下面的声明,这是我的解决方案。

如何启用添加用户按钮,一旦所有领域都充满?

我已将required属性添加到所有输入字段,表格名称userForm是范围内的变量。它有它的有效性变量,在我的情况,我使用userForm.$invalid除非所有required属性字段填写,这将是真实的。该Add User通过使用ng-disabled属性无效,请检查下面的jsfiddle的演示。

JSFiddle Demo

<div ng-app="myApp"> 

<div ng-controller="myCtrl"> 
    <form role="form" name='userForm' novalidate> 
     <div class="container"> 
      <div class="row" ng-repeat="myid in userid"> 

       <div class="form-group"> 
        <div class="col-md-3"> 
         <label>ID</label> 
         <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled> 
        </div> 
        <div class="col-md-3"> 
         <label>Comments</label> 
         <textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea> 
        </div> 

        <div class="col-md-3 "> 
         <label>Gender</label> 

         <select ng-model="gender" name="select2" required> 
          <option value="male">Male</option> 
          <option value="female">Female</option> 

         </select> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="buttonContainer text-center btn-container"> 
      <br> 
      <button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button> 
      <button type="button" class="btn button--default btn--small pull-center">Close</button> 
     </div> 
    </form> 
</div> 
</div> 
+0

我怎样才能在这个例子中,每个场模型的价值。我需要将此模型值传递给服务器。 – user3760261

+0

@ user3760261更新了我的答案! –

+0

根据我的要求,我的$ scope.userid只有userid的。因为我不能像你那样重视任何价值。是否有任何其他的方式来得到这个模型值 – user3760261