Question

当相应的表单控件具有required属性时，我希望我的表单标签在标签旁边显示一个红色星号。

如果需要标签的相应输入，select或textarea（标签对应的元素），我希望在页面加载期间动态地将星号附加到标签，而不是硬编码星号。 / p>

我在下面创建了指令，该指令有效。但有没有更好，更本土的方式来实现我的目标？如果div.form-group中的相应表单控件具有div.form-group属性，则此指令将查找所有*个容器并在标签后添加红色required字符。

myApp.directive('labelsRequired',function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs){
            elem.find('div.form-group').each(function(i, formGroup){
                var formControls = $(formGroup).find('input, select, textarea');
                console.log(formControls)
                if (0 !== formControls.length && undefined !== $(formControls[0]).attr('required')){
                    jLabel = $(formGroup).find('label');
                    jLabel.html(jLabel.html()+ "<span class='red-color'>*</span>");
                }
            })
        }
    }
});

该指令假设所有输入，选择和textareas都在div.form-group容器内。

<div class='form-group'>
  <label>First Name</label><!-- this label gets an asterisk -->
  <input name='fname' required />
</div>
<div class='form-group'>
  <label>Favorite Food</label><!-- this label does not get an asterisk -->
  <input name='favFood'  />
</div>

Answer 1

建立Corey的答案：

我只是使用了编译而不是链接，因为我看到我的必需属性没有应用于我的输入元素。我还为我提供的任何下拉列表中都包含了一个选择标记。

    app.directive('inputRequired', function () {
    return {
        restrict: 'A',
        compile: function (elem) {
            elem.find('label').append("<sup><i class='fa fa-asterisk'></i></sup>");
            elem.find('input').attr('required', 'required');
            elem.find('select').attr('required', 'required');
        }
    };
});

Answer 2

您不需要指令，内置的form properties可以与ng-show等过滤器一起使用，请查看：

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="userForm" novalidate>
        <div class='form-group'>
          <label>First Name</label>
          <input name='fname' ng-model="fname" required />
          <label ng-show="userForm.fname.$dirty && userForm.fname.$error.required">* Required field</label>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

如果为ng-model定义input，则可以处理它，看它是否已填满。您也可以在用户＆＃34;脏＆＃34;之后检查它。它与userForm.fname.$dirty一起，因此只有在用户尝试输入内容然后清除它之后才会显示标签。尝试使用它here JSFiddle

Answer 3

如果您未使用内置的Angular验证，则可以重新构建指令并将其附加到.form-group元素。像这样：

app.directive('inputRequired', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attr) {
      elem.find('label').append('<span>*</span>');
      elem.find('input').attr('required', 'required');
    }
  };
});

您的HTML将如下所示：

<div class="form-group" input-required>
  <label>Name</label>
  <input name="name" />
</div>
<div class="form-group">
  <label>Food</label>
  <input name="food" />
</div>

但是，如果您没有使用Angular查看内置验证，我建议您使用它。

Answer 4

这可能为时已晚，可能不会太优雅，但如果有人需要，它会起作用：

<label ng-show="userForm.fname.$validators.hasOwnProperty('required')">* Required field</label>

AngularJS表单验证：向用户指示必填字段

4 个答案: