Javascript AngularJS-指令模板URL中的表单验证_Javascript_Angularjs_Scope_Directive

Javascript AngularJS-指令模板URL中的表单验证

javascript angularjs

Javascript AngularJS-指令模板URL中的表单验证,javascript,angularjs,scope,directive,Javascript,Angularjs,Scope,Directive,我试图从templateUrl内部使用angular的表单验证我有一个加载templateUrl的指令，其中我有一个表单，其中的输入从指令范围中获取ng required和ng regex值。现在，我试图把我的指令的范围 form:“=”，但当我访问scope.form时，它是未定义的我必须指定“我的提交”按钮位于表单外部，当单击“保存（$index）”时，它必须首先检查表单是否有效，然后继续保存编辑的数据。scope.save（）在我的指令中定义这是来自模板： <tr data-

我试图从templateUrl内部使用angular的表单验证

我有一个加载templateUrl的指令，其中我有一个表单，其中的输入从指令范围中获取ng required和ng regex值。现在，我试图把我的指令的范围 form:“=”，但当我访问scope.form时，它是未定义的

我必须指定“我的提交”按钮位于表单外部，当单击“保存（$index）”时，它必须首先检查表单是否有效，然后继续保存编辑的数据。scope.save（）在我的指令中定义

这是来自模板：

 <tr data-ng-repeat="row in source.data "  data-ng-class="{'selected':row.$_selected}" >
            <td data-ng-repeat="c in settings.columns" data-ng-click="toggleSelect(row)" >         
                <form name="editForm" id="editForm" novalidate> 
                    <div ng-switch on="c.type" ng-show="editMode[$parent.$index]">
                        <span ng-switch-when="text" >
                            <input type="{{c.type}}"  data-ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}"/>
                        </span>
                        <span ng-switch-when="select" >
                            <select  data-ng-model="row[c.name]" ng-selected="row[c.name]" ng-init="row[c.name]" ng-options="item.value as item.name for  item in c.items" ng-required="{{c.isRequired}}">
                                <!--<option data-ng-repeat="(value, name) in c.items" value="{{value}}">{{name}}</option>-->
                            </select>
                        </span>
                        <span ng-switch-when="textarea">
                            <textarea  ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}">                                                      
                            </textarea>
                        </span>
                        <span ng-switch-when="checkbox">
                            <!--<label for="checkboxInput">{{c.name}}</label>-->
                            <input name="checkboxInput" type="checkbox" data-ng-model="row[c.name]" ng-true-value="{{c.true}}" ng-false-value="{{c.false}}"/>
                        </span>
                        <span ng-switch-default="">
                            {{row[c.name]}}
                        </span>                     
                    </div>          
                </form>         
                <span ng-hide='editMode[$parent.$index]'>{{row[c.name]}}</span>
            </td>                  
            <td>
                <a href="{{row[settings.specialFields.url]}}" class="btn btn-default opacity75" data-ng-if="row[settings.specialFields.url]">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>                                      
            </td>                
            <td data-ng-if="row[settings.specialFields.isEditable]">
                <button ng-click="edit(row)" ng-show="!editMode[$index]" class="btn btn-primary" >
                    edit {{$index}}
                </button>                   
                <button ng-click="save($index)" ng-disabled=""  ng-show="editMode[$index]" class="btn btn-primary">
                    save
                </button>
                <button ng-click="cancel($index)" ng-show="editMode[$index]"  class="btn btn-default">
                    cancel
                </button>                     
            </td> 
        </tr>

给你：

表单按钮在表单之外，也可能在指令之外。这与安格拉斯无关
有两个输入，都是必需的，都有您所说的正则表达式验证
有一个带有templateURL的指令

这里需要记住的重要一点是表单必须有一个名称，然后在以下情况下由该名称引用：scope.myForm

您不必像我在plunker中那样对输入字段进行命名，但是如果您这样做了，并且它们的值彼此不同，那么您可以这样做：scope.myForm.myInputName.$valid以查看每个输入是否有效

但是，在所有输入都有效之前，实际表单是无效的，因此您可能只需要像所提供的示例中那样对表单本身调用valid

如果将按钮移到指令之外，则必须将提交功能从指令移到控制器（最有可能）

让我知道这是否有帮助，如果需要，我可以改变。另外，先用你的问题试试plunker，然后发布新代码的进展情况；只需用叉子叉一下，并提供一个链接

这是plunker代码以防万一

<!DOCTYPE html>
  <html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="angular-ui-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <my-directive></my-directive>
    </div>
  </div>
</html>

<form name="myForm" novalidate>
  <label>Input #1 (required)</label><br>
  <input ng-model="form.data.myName" name='myName' ng-pattern="/\D+/" ng-required="true" /> <span ng-show="myForm.myName.$error.pattern">Takes anything but digits</span><br>
  <br>
  <label>Input #2 (required)</label><br>
  <input ng-model="form.data.myEmail" name='myEmail' ng-pattern="/\d+/" ng-required="true" /> <span ng-show="myForm.myEmail.$error.pattern">Takes only digits</span>
</form>
<br>
<p># I'm a button that is outside of the form!</p>
<p ng-model="form.submitted">Form Submitted: <span class="blue">{{ form.submitted }}</span></p>
<p>Form Valid?: <span class="blue">{{ myForm.$valid }}</span></p>
<button ng-click="submitForm('myForm')">Submit Form</button>

<p ng-model="form.data">Here is the Form data:</p>
{{ form.data }}


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

app.controller('MyCtrl', function ($scope) {});

  app.directive("myDirective", function () {

    return {
      restrict: 'AE',
      require: '?ngModel',
      templateUrl: 'my-directive.html',

      link: function (scope, elm, attrs, ctrl) {
      scope.form = {submitted: false, data: {}};

      scope.submitForm = function(formname){
        console.log(scope[formname].myEmail)
        console.log(scope.formname)
        console.log(scope[formname].$valid)
        scope.form.submitted = true;
      }
    } // end link
  } // end return
});


输入#1（必选）

只接受数字以外的任何内容



输入#2（必选）

只需要数字


#我是表单外的一个按钮
表单提交：{{form.submitted}
表单有效吗？：{myForm.$Valid}
提交表格
以下是表单数据：
{{form.data}}
var-app=angular.module（'myApp'，[]）；
app.controller（'MyCtrl'，函数（$scope）{}）；
应用程序指令（“myDirective”，函数（）{
返回{
限制：“AE”，
要求：“？ngModel”，
templateUrl:'my directive.html'，
链接：函数（范围、elm、属性、ctrl）{
scope.form={提交：false，数据：{}；
scope.submitForm=函数（formname）{
console.log（作用域[formname].myEmail）
console.log（scope.formname）
console.log（作用域[formname]。$valid）
scope.form.submitted=true；
}
}//结束链接
}//结束返回
});

您的保存功能必须在表单之外，有什么原因吗？

<!DOCTYPE html>
  <html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="angular-ui-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <my-directive></my-directive>
    </div>
  </div>
</html>

<form name="myForm" novalidate>
  <label>Input #1 (required)</label><br>
  <input ng-model="form.data.myName" name='myName' ng-pattern="/\D+/" ng-required="true" /> <span ng-show="myForm.myName.$error.pattern">Takes anything but digits</span><br>
  <br>
  <label>Input #2 (required)</label><br>
  <input ng-model="form.data.myEmail" name='myEmail' ng-pattern="/\d+/" ng-required="true" /> <span ng-show="myForm.myEmail.$error.pattern">Takes only digits</span>
</form>
<br>
<p># I'm a button that is outside of the form!</p>
<p ng-model="form.submitted">Form Submitted: <span class="blue">{{ form.submitted }}</span></p>
<p>Form Valid?: <span class="blue">{{ myForm.$valid }}</span></p>
<button ng-click="submitForm('myForm')">Submit Form</button>

<p ng-model="form.data">Here is the Form data:</p>
{{ form.data }}


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

app.controller('MyCtrl', function ($scope) {});

  app.directive("myDirective", function () {

    return {
      restrict: 'AE',
      require: '?ngModel',
      templateUrl: 'my-directive.html',

      link: function (scope, elm, attrs, ctrl) {
      scope.form = {submitted: false, data: {}};

      scope.submitForm = function(formname){
        console.log(scope[formname].myEmail)
        console.log(scope.formname)
        console.log(scope[formname].$valid)
        scope.form.submitted = true;
      }
    } // end link
  } // end return
});