相关疑难解决方法(0)

你能嵌套html表格吗?

是否可以嵌套像这样的html表单

<form name="mainForm">
  <form name="subForm">
  </form>
</form>
Run Code Online (Sandbox Code Playgroud)

这两种形式都有效吗?我的朋友遇到了这个问题,这是subForm作品的一部分,而另一部分却没有.

html nested-forms

434
推荐指数
12
解决办法
24万
查看次数

AngularJS:列出所有表单错误

背景:我目前正在开发一个带标签的应用程序; 并且我想列出未通过验证的字段/部分,以指示用户在右侧选项卡中查找错误.

所以我试图利用form.$error这样做; 但我还没有完全搞定它.

如果在a内发生验证错误ng-repeat,例如:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>
Run Code Online (Sandbox Code Playgroud)

空值导致form.$error包含以下内容:

{ "required": [
  {
    "inumber": {}
  },
  {
    "inumber": {}
  }
] }

另一方面,如果验证错误发生在此之外ng-repeat:

<input ng-model="name" name="iname" required="true" />
Run Code Online (Sandbox Code Playgroud)

form.$error对象包含以下内容:

{ "required": [ {} ] }

但是,我期待以下内容:

{ "required": [ {'iname': {} } ] }

关于为什么缺少元素名称的任何想法?

可以在这里找到一个运行的plunkr:http://plnkr.co/x6wQMp

angularjs angularjs-ng-repeat

65
推荐指数
2
解决办法
5万
查看次数

Angular动态设置ng-messages到name属性

我动态创建输入并希望验证它们中的每一个,但是无法将ng-messages属性正确地设置为动态生成的字段名称属性.

<input ng-model="sub.name" name="subName{{$index}}" class="form-control" placeholder="name" required maxlength="20" />
         <div class="field-error" ng-messages="form.subName{{$index}}.$error" ng-show="form.Name.$touched" role="alert">
               <div ng-message="required">Name is required.</div>
          </div>
Run Code Online (Sandbox Code Playgroud)

我在第二行遇到问题,我将ng-messages动态设置为ng-messages.我怎样才能做到这一点?

javascript validation angularjs ng-messages

28
推荐指数
1
解决办法
1万
查看次数

Angularjs中的动态表单名称属性<input type ="text"name ="{{variable-name}}"/>

当动态创建"inputName"时,有人会如何使用formName.inputName.$有效?

  <form name="formName">
    <input ng-repeat="(variable) in variables"
           type="text" name="variable.name"
           ng-model="variable.name" required />
 </form>
Run Code Online (Sandbox Code Playgroud)

HTML输入属性"name"的输出将是字符串"variablename",它将应用于所有重复输入.

如果我们试过这个

<form name="formName">
  <input ng-repeat="(variable) in variables"
         type="text" name="{{ variable.name }}"
         ng-model="variable.name" required />
</form>
Run Code Online (Sandbox Code Playgroud)

HTML输入属性"name"的输出将是字符串"{{variable.name}}",它将应用于所有重复输入.

在这两个条件中的任何一个中,都不会动态创建每个重复输入元素的name属性; 所有输入将共享相同的输入名称.如果您想根据特定名称调用特定输入,那就太好了.

  • 需要使用动态名称值
  • 需要能够调用$ scope.formName.dynamicName.$ valid
  • 需要能够调用$ scope.formName.$ valid
  • 需要动态名称输入字段添加到嵌套表单或主表单

javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

23
推荐指数
1
解决办法
4万
查看次数

AngularJs ng-repeat中表单的动态名称

如何使用动态名称在ng-repeat中命名表单?

<div ng-repeat="item in itemList">
 <form name="item_details" ng-class="validateForm(item_details)">
   //few form elements
 </form>
</div>
Run Code Online (Sandbox Code Playgroud)

我想动态命名每个表单.例如,将$ index添加到表单的名称.我该如何实现?我在ng-repeat上尝试过ng-init但是没有用.

angularjs

23
推荐指数
1
解决办法
1万
查看次数

name属性中的angular ngRepeat $ index

<div ng-repeat="fod in form.order_details">
...
    <td class="control-cell">
        <span ng-class="{error: prForm['qty_'+$index].$error.required && showValidationMessages}">
            <input type="number" name="{{'qty_' + $index}}" ng-model="fod.qty" ng-change="qtyPerKindCalc($index);" id="{{'qty_' + $index}}" required />
            <span ng-show="prForm['qty_'+$index].$error.required && showValidationMessages" class="error-msg">This field required</span>
        </span>
    </td>
...
</div>
Run Code Online (Sandbox Code Playgroud)

ngRepeat,我有必要的字段.我有表单对象$ scope.prForm - 我看到$ error.问题在于名称="{{'qty_'+ $ index}}".在$ scope.prForm中我有字段

{{'qty_' + $index}}: instantiate.c
Run Code Online (Sandbox Code Playgroud)

但我需要

qty_0: instantiate.c
Run Code Online (Sandbox Code Playgroud)

如何在name属性中进行良好的{{'qty_'+ $ index}}操作?

javascript angularjs angularjs-ng-repeat

4
推荐指数
1
解决办法
1万
查看次数

ng-repeat中的角度验证不起作用

我在使用ng-repeat语句进行验证时遇到了困难.我有以下代码.我只想在名称字段为空时将has-error添加到div.form-group.我似乎无法让它工作.有什么想法吗?

我在小提琴手中的尝试

<div ng-app="app" ng-controller="bookController">
    <form name="myForm" ng-submit="submitMe(this)" novalidate>
        <table class="table">
            <tr ng-repeat="order in orders">
                <ng-form name="innerForm">
                <td>{{ order.id }}</td>
                <td>
                    <div class="form-group" ng-class="{ 'has-error' : innerForm.name.$invalid && submitted }">
                        <input type="input" ng-model="order.name" name="name" required />
                    </div>
                </td>
                </ng-form>
            </tr>
        </table>
        <input type="submit" value="submit" ng-click="submitted = true" />
    </form>

    <pre>
        {{ orders | json }}
    </pre>

</div>


var app = angular.module("app", []);

app.controller("bookController", function ($scope) {

    $scope.submitMe = function(form) {
        console.log(form);
    };

    $scope.orders = [{
        id: 1,
        name: ''
    }, …
Run Code Online (Sandbox Code Playgroud)

angularjs ng-repeat angularjs-ng-repeat

4
推荐指数
1
解决办法
1913
查看次数

当使用ng-form和ng-repeat时,AngularJs单选按钮被连接

请参阅此plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

在包含单选按钮组的ng-repeat上使用ng-form标签时,单选按钮被链接,因此如果您在一次重复重复中选中一个单选按钮,它将在所有其他重复按钮中取消选择.这让我感到困惑,因为ng-repeat的模型与其他项目隔离.这不仅是使用ng-repeat时的问题.当具有带有隔离范围的自定义指令的多个实例时,它也会出现

<div ng-form name="myForm">
Run Code Online (Sandbox Code Playgroud)

在Plnkkr中尝试添加一些项目并检查某些项目上的单选按钮.它们应该是独立的,但它们不是.

这是Angular中的错误吗?如果不是为什么它以这种方式工作,我该如何解决它?

<form name="mainForm" ng-submit="submitAll()">
      <ul>
        <li ng-repeat="item in items" ng-form="subForm">          
          <input type="text" required name="name" ng-model="item.name"/>
          <input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
          <input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
          <span ng-show="subForm.name.$error.required">required</span>
          <button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
        </li>
      </ul>
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>
Run Code Online (Sandbox Code Playgroud)

forms angularjs angularjs-directive angularjs-ng-repeat

1
推荐指数
1
解决办法
4731
查看次数