Javascript 验证AngularJS中指令的字段

我试图将输入和一些标记包装到AngularJS指令中

然而，这些字段应该总是经过验证，而不应该这样

请查看我的示例@

下面是那些不想看Plunker的人的代码

我的指令

app.directive('myInput', function() {
  return {
    restrict: 'E',
    require: '^ngModel',
    templateUrl: 'form_control.html',
    scope: {
      label: '@',
      placeholder: '@',
      name: '@',
      form: '=',
      ngModel: '=ngModel'
    },
  }
});

这是我的模板

<div class="form-group" ng-class="{'has-error': form.{{name}}.$invalid && form.{{name}}.$dirty, 'has-success': form.{{name}}.$valid }">
<label for="{{name}}" class="col-sm-2 control-label">{{label}}</label>
<div class="col-sm-10">
    <input type="{{type}}" class="form-control col-sm-10" id="{{name}}" name="{{name}}" ng-model="ngModel" placeholder="{{placeholder}}" ng-maxlength="10" ng-required="true">
</div>
</div>

{{label}}

这是在我的index.html中

<my-input ng-model="website.url" name="url" label="URL" placeholder="http://example.com" form="form"></my-input>

即使模板中的输入是必需的，字段也会被验证，如果字段为空，则不应验证

---

我做错了什么？

必填字段在DOM加载时立即无效，因为它们只有在有值时才有效

此外，在plunker中，顶部输入为绿色，带有有效的错觉，而下部输入为红色，表示无效

你不能这么做

<div class="form-group" ng-class="{'has-error': form.{{name}}.$invalid && form.{{name}}.$dirty, 'has-success': form.{{name}}.$valid }">

<input type="{{type}}" class="form-control col-sm-10" id="{{name}}" name="{{name}}" ng-model="ngModel" placeholder="{{placeholder}}" ng-maxlength="10" ng-required="true">

form.$valid && form.$dirty

这是从你的车上拿走的。使用console.log（$scope.form）并查看对象。 在$error下，您将发现此表单引用了两个输入，它们都不是名为“url”的预期输入，实际上是“title”输入和您的指令输入“{name}”，如图所示

form: Constructor
  $addControl: function (control) {
    $dirty: false
    $error: Object...
      $name: "title"...
      $name: "{{name}}"

这是一个forked plunker，我已经在这里设置了console.log表单

这表明表单不知道任何“url”输入。为了解决这个问题，您可以为输入名称字段编写一个自定义指令。或者用我在下面写的

app.directive('myName', function(){

  var myNameError = "myName directive error: "

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: 'ngModel', // ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } // if no ngModel exists for this element

      checkInputFormat(attrs); // check myName input for proper formatting.

      var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
      findForm(formName, ngModel, scope);
    } // end link
  } // end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.myName )){ // should be in format "wordcharacters/wordcharacters"
      throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.myName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName // adds string to ngModel.$name variable.
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return // add input name and input object.
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ // ran out of scope before finding scope[formName]
      throw myNameError + "<Form name=" + formName + "'> element could not be found."
    }
    if( formName in scope){ // found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
  }
});

// DIRECTIVE NOTES:
// This directive is used by simply including the following HTML element:
// <input my-name="email/profileForm">.
// In the example above, the input name is "email" and the form name
// that this input would be attached to would be named "profileForm"
// Like this...
// <form name="profileForm">
//   <input my-name="email/profileForm">
// </form>
// Notice this "/" dividing the input name from the form name.  This directive uses the '/'
// to separate the input name from the form name.
// Although it has not been tested yet, this directive should work with multi nested forms
// as well, as the recursive search only looks for the form name that was passed in, inwhich
// to bind the ngModel to.
// In this example, other form names would be skipped.
// <form name="profileForm">
//   <form name="miniFormOne">
//      <form name="miniFormTwo">
//        <input my-name="email/profileForm">
//      </form>
//   </form>
// </form>
// The above example may not be the best behavior, but was just added as an example.

但这并不适用于每个单独的输入。你可以想出你自己的方法

我在输入中使用了另一个指令

然后在我的错误中，我只听ngModel，就像在需要ngModel之后，现在可以调用ngModel。$invalid，然后设置一个变量来更改CSS。如果我有时间，我将制作一个jsFiddle并在底部链接它。但是，您可以只使用类input.ng-invalid{border color:red；}，并且输入在有效之前将是红色的

如果这还不清楚，再问一些问题。。。我们会拿到的

---

希望这个助手在你的背包里，一块是绿色的，一块是红色的。你想两个都是绿色的吗？那么什么时候显示无效？何时提交表格？表单如何知道何时验证输入？加载DOM时，任何必需字段都无效。

<input type="{{type}}" class="form-control col-sm-10" id="{{name}}" my-name="{{ variableName  + '/' + yourformnamevariable  }}" ng-model="ngModel" placeholder="{{placeholder}}" ng-maxlength="10" ng-required="true">

form.$valid && form.$dirty