ng-repeat 内的 ng-form，ng-repeat 外的提交按钮 [英] ng-form inside ng-repeat with submit button outside of ng-repeat

查看：25
本文介绍了ng-repeat 内的 ng-form，ng-repeat 外的提交按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个代码:

 
<ng-form name="form1"><div class="col-xs-3"><div class="form-group"><input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required/><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>

</ng-form>

<button data-ng-click="add(form1)" class="btn-add" style="padding-left: 40%;"></button>

控制器:

//表单添加处理程序.$scope.add = 函数(表单){//触发验证标志.$scope.submitted = true;//如果表单无效，返回并让 AngularJS 显示验证错误.如果(形式.$无效){console.log('无效');返回;} 别的 {var newItemNo = $scope.inputs.length + 1;var 输入 = { 'id': 'input' + newItemNo }$scope.inputs.push(inputs);$scope.isDisabled = false;}};

问题是我只能验证 ng-repeat 和 ng-form 中的表单输入，并且我需要在该 html 块之外触发事件，也许我只是个菜鸟(第一次使用 angular1 验证).我会感谢一些帮助.提前致谢.

解决方案

根据您的评论并遵循为 ng-repeat 中的每个元素生成表单的相同目标，这应该是答案:

html

<!-- 如果所有子表单都有效，则此表单将有效--><div class="row" ng-repeat="input in input | filter:inputNumber"><ng-form name="form1"><div class="col-xs-3"><div class="form-group"><input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required/><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small><small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>

</ng-form>

<button data-ng-click="add(generalForm)" class="btn-add" style="padding-left: 40%;"></button></表单>

控制器

//表单添加处理程序.$scope.add = 函数(表单){//触发验证标志.$scope.submitted = true;//如果表单无效，返回并让 AngularJS 显示验证错误.如果(表单.$无效){console.log('无效');返回;} 别的 {var newItemNo = $scope.inputs.length + 1;var 输入 = { 'id': 'input' + newItemNo }$scope.inputs.push(inputs);$scope.isDisabled = false;}};

I've this code:

 <div class="row" ng-repeat="input in inputs | filter:inputNumber">
     <ng-form name="form1">
       <div class="col-xs-3">
            <div class="form-group">
                 <input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
            </div>
        </div>
      </ng-form>
  </div>

 <button data-ng-click="add(form1)" class="btn-add" style="padding-left: 40%;"></button>

Controller:

// Form add handler.
$scope.add = function(form) {
    // Trigger validation flag.
    $scope.submitted = true;

    // If form is invalid, return and let AngularJS show validation errors.
    if (form.$invalid) {
        console.log('invalid');
        return;
    } else {
        var newItemNo = $scope.inputs.length + 1;
        var inputs = { 'id': 'input' + newItemNo }
        $scope.inputs.push(inputs);
        $scope.isDisabled = false;
    }
};

The problem is I can only validate the form inputs inside ng-repeat and ng-form, and I need to trigger the event outside of that html block, maybe I'm just being noob (first time using angular1 validations). I will appreciate some help. Thanks in advance.

解决方案

Based on you comment and following the same goal of generating a form for each element in your ng-repeat, this should be the answer:

html

<form name="generalForm"> <!-- this form will be valid if all sub-forms are valid-->
 <div class="row" ng-repeat="input in inputs | filter:inputNumber">
     <ng-form name="form1">
       <div class="col-xs-3">
            <div class="form-group">
                 <input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
            </div>
        </div>
      </ng-form>
  </div>

 <button data-ng-click="add(generalForm)" class="btn-add" style="padding-left: 40%;"></button>
</form>

controller

// Form add handler.
$scope.add = function(form) {
    // Trigger validation flag.
    $scope.submitted = true;

    // If form is invalid, return and let AngularJS show validation errors.
    if (form.$invalid) {
        console.log('invalid');
        return;
    } else {
        var newItemNo = $scope.inputs.length + 1;
        var inputs = { 'id': 'input' + newItemNo }
        $scope.inputs.push(inputs);
        $scope.isDisabled = false;
    }
};

这篇关于ng-repeat 内的 ng-form，ng-repeat 外的提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆