angularjs 组内自定义require指令在时间输入框中引用时出现的问题及排查

问题一：【入驻日期】字段为【必填】，但前面没有出*。 

加的required指令可以要求为必填，（指令使用要求：只有提交按钮是form-submit才可以在都通过验证的情况下提交。而且input输入框有form-control类，指令才可以为input元素添加CSS定制样式，然后最外面的<form>上要有form-group类。如果是td，则必须有name属性，且td的name要每个都不一样。）

但是因为层级不对，所以前面没有出*。

后面把层级修改了下，从这个，

换成下面的，就可以了。

 

 

层级不对的原因：validator.js中require指令源码，里面定义了 ，如果为空，则在其父元素的前边元素前面加上*

 

问题二：后面发现这样子带来另一个问题：

入驻日期的不能为空提示，跑到下一行了。

去require指令所在validator.js源码里面看了错误提示的追加方式，是这样的：

validator. showError( el, validator. getErrorMessages( el, elc. $error));

到formValidator.js中找到showError方法，

那个我自己加了"123wqq..."的就是提示错误的append代码。

因为 提示错误的div 会找到父元素，然后追加在后面。就追加在有input-group的那个div。

而input-group设置了float:none，但提示错误的div是col-sm-3的。col-sm-3是float的，但是被禁了。就不能排成一行了。

而input-group是为了把输入框和日期图标排在一起，而且让加了有日期图标点击事件的，所以不能去掉。

解决办法：

再给input-group那个div，加上float就可以了。

 

或者如果不考虑其它的影响。只是为了排成一行，还可以有2种解决办法：

1. 把所有元素变成行内的。label的control-label属性本身设置了inline-block。input-group是display:table的，改为

display:inline-table;

vertical-align:middle;

 把提示错误div的col-sm-3去掉，设为display:inline-block和vertical-align:middle;

2. 再包一层，<div class=" col-sm-4"></div>。让它里面的元素都是浮动的。（这就是之前没有出现*的那个bug）