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

发布时间：2020-12-17 16:56:45 所属栏目：安全来源：网络整理

导读：当相应的表单控件具有必需属性时,我希望我的表单标签在标签旁边显示一个红色星号. 如果需要标签的相应输入,select或textarea(标签对应的元素),我希望在页面加载期间动态地将星号附加到标签,而不是硬编码星号. 我在下面创建了指令,该指令有效.但有没有更好,更

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

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

我在下面创建了指令,该指令有效.但有没有更好,更本土的方式来实现我的目标？如果div.form-group中的相应表单控件具有必需属性,则此指令查找所有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>");
                }
            })
        }
    }
});

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

解决方法

建立科里的答案：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!