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

I would like my form labels to display a red asterisk next to the label when the corresponding form control has a required attribute.

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

Instead of hard coding the asterisk, I desire a way to append the asterisk to the label dynamically during page load if the label's corresponding input, select or textarea is required (the element the label corresponds to).

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

I created the directive below, and the directive works. But is there a better, more native way to accomplish my goal? This directive finds all the div.form-group containers and adds a red * character after the label if the corresponding form control inside the div.form-group has a required attribute.

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

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>");
                }
            })
        }
    }
});

The directive assumes all inputs, selects, and textareas are inside a div.form-group container.

该指令假设所有输入，选择和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>

3 个解决方案

#1

Building off of Corey's answer:

建立Corey的答案：

I just used compile rather than link, as I saw that my required attribute was not being applied to my input elements. I also included a select tag for any dropdowns that I had.

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

    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');
        }
    };
});

#2

You don't need a directive, there are built-in form properties you can use with filters like ng-show, look:

你不需要一个指令，有内置的表单属性，你可以使用像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>

If you define an ng-model for the input you can deal with it looking if it is filled or not. You can also check it only after the user "dirty" it with userForm.fname.$dirty, so the label will be shown only after a user try to input something but then clear it. Try playing with it here JSFiddle

如果为输入定义ng-model，则可以处理它是否已填充。您也可以在用户使用userForm.fname。$ dirty“脏”之后检查它，因此只有在用户尝试输入内容然后清除它之后才会显示标签。尝试在这里玩JSFiddle

#3

If you're not using the built-in Angular validation, you could restructure your directive and attach it to your .form-group element. Like this:

如果您没有使用内置的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');
    }
  };
});

Your HTML would then look like:

您的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>

However, if you haven't looked into the built-in validation with Angular, I would recommend using it.

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

#1