AngularJs验证CSS错误
我有一个下面的代码,它会生成3个文本框。现在的问题是,当我点击其中一个文本框时,所有3个文本框都会变得焦点,即使它们具有不同的名称和标签值。AngularJs验证CSS错误
<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
<div class="col-md-2" style="padding:0px; margin-right:1%;">
<p style="font-size:11px;">P no {{dohPolicy}} </p>
</div>
<div class="form-group col-md-6"
data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
"has-success": dohForm.dohPolicy.$valid,
"has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
"is-empty": !dohForm.dohPolicy.$viewValue }'
style="right: 150px; bottom: 40px; padding: 0; width:20%;">
<label for="dohPolicy"></label>
<input type="text" name="dohPolicy"
data-ng-model="dohPolicy" required readonly
data-ng-blur='dohForm.dohPolicy.hasFocus=false'
data-ng-focus='dohForm.dohPolicy.hasFocus=true'>
<p data-ng-show="dohForm.dohPolicy.$error.required && (dohForm.dohPolicy.$touched || submitted)"
class="error-block">
P Number(s)
</p>
</div>
</div>
即使我尝试使用字符串数组,但也无法解决问题。 我想要当我点击特定的文本框时,只有该文本框应该获得焦点和突出显示。
任何帮助表示赞赏!
感谢
<input type="text" name="dohPolicy"
data-ng-model="dohPolicy" required readonly
data-ng-blur='dohForm.dohPolicy.hasFocus=false'
data-ng-focus='dohForm.dohPolicy.hasFocus=true'
>
这里,动态生成的所有输入的文本,share the same model
dohPolicy。
所以,他们all get dirty at the same time and emit the blur & focus event
。
您需要添加模型
的唯一名称作为@Riyaj建议所有的输入控制共享同一型号& 同名,因此,所有在同一时间
控制名称变脏在表单中必须是唯一的。
您必须为每个输入控件提供不同的名称。
<form role="form" novalidate name="vm.form">
<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
<div class="col-md-2" style="padding:0px; margin-right:1%;">
<p style="font-size:11px;">P no {{dohPolicy}} </p>
</div>
<div class="form-group col-md-6"
data-ng-class='{ "has-focus": dohForm.dohPolicy[{{dohPolicy}}].hasFocus,
"has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid,
"has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
"is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }'
style="right: 150px; bottom: 40px; padding: 0; width:20%;">
<label for="dohPolicy">
</label>
<input
type="text" name="dohPolicy[{{dohPolicy}}]"
data-ng-model="dohPolicy" required
data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false'
data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true'
class="form-control"
>
<p
data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)"
class="error-block">P Number(s)</p>
</div>
</div>
</form>
希望这将帮助你..你的名字属性
使用$指数和验证动态
<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
<div class="col-md-2" style="padding:0px; margin-right:1%;">
<p style="font-size:11px;">P no {{dohPolicy}} </p>
</div>
<div class="form-group col-md-6"
data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
"has-success": dohForm.dohPolicy.$valid,
"has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
"is-empty": !dohForm.dohPolicy.$viewValue }'
style="right: 150px; bottom: 40px; padding: 0; width:20%;">
<label for="dohPolicy">
</label>
<input
type="text" name="dohPolicy_{{$index}}"
data-ng-model="dohPolicy" required readonly
data-ng-blur='dohForm.dohPolicy.hasFocus=false'
data-ng-focus='dohForm.dohPolicy.hasFocus=true'
>
<p
data-ng-show="dohForm['dohPolicy_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)"
class="error-block">P Number(s)</p>
</div>
</div>
我试过上面的解决方案,仍然无法正常工作,错误:$ parse:syntax 语法错误 – shreyansh
我创建了一个plunker。请检查https://plnkr.co/edit/hPTwxyjzLbGNpmd8VI4y?p=preview –
你可以创建一个codepen代码片段。 –