Question

我有一些代码可以读取JSON数据，并且该数据用于呈现自定义表单。当我渲染文本输入时，我想为控件添加验证。这很简单，但是我在制定从动态信息中呈现验证HTML的正确方法时遇到了一些麻烦。

这比解释更容易展示。所以这是我的代码，你可以看到我正在使用自定义数据渲染属性。（例如{{fl.fldBasic.fldLabel}}）

<div ng-class="{ 'has-error' : editForm.{{fl.fldBasic.fldLabel}}.$invalid && !editForm.{{fl.fldBasic.fldLabel}}.$pristine }">
    <input type="text"
           class="form-control"
           id="{{fl.fldBasic.fldLabel}}"
           tabindex="{{$index}}"
           ng-model="fl.dataValue"
           ng-required="{{fl.fldAttr.attrRequired}}"
           ng-readonly="{{fl.fldAttr.attrReadOnly}}"
           ui-mask="{{fl.edit_Mask}}"
           title="{{fl.fldAttr.attrHelp}}"
           placeholder=""
           required autofocus>
    <div class="help-block"
         ng-messages="editForm.{{fl.fldBasic.fldLabel}}.$error"
         ng-if="editForm.{{fl.fldBasic.fldLabel}}.$touched">
        <p ng-message="required">This field is required</p>
    </div>
</div>

当我运行它时，这是Web浏览器呈现的内容：

> <div ng-class="{ 'has-error' : editForm.Label002.$invalid &amp;&amp;
> !editForm.Label002.$pristine }" class="ng-scope">
>     <input type="text" class="form-control ng-pristine ng-valid ng-not-empty ng-valid-required ng-touched" id="Label002" tabindex="1"
> ng-model="fl.dataValue" ng-required="true" ng-readonly="false"
> ui-mask="" title="This field contains the last name of the cardholder.
> It can be up to 40 characters long." placeholder=""
> required="required" autofocus="">
>     <!-- ngIf: editForm.{{fl.fldBasic.fldLabel}}.$touched --> </div>

如果你看，你会看到ng-class语句的＆符号被渲染为＆amp; amp;的，以及底部的ng-if是逐字递送数据值。

我一直在玩试图用引号包装东西，但我找不到能让它全部工作的神奇组合。有关如何使这项工作的任何想法？

谢谢！

Answer 1

尝试使用功能。在控制器中声明一个函数，该函数将生成动态字符串并将该函数用于ng-class。这应该有用。

<div ng-class="{ 'has-error' : myHasErrorFunc(editForm, fl.fldBasic.fldLabel)}">

然后你应该在你的范围内声明函数myHasErrorFunc。

Answer 2

此示例适用于我：

<div class="form-group" ng-class="{ 'has-error' : adForm.adName.$invalid && !adForm.adName.$pristine }">
    <label class="col-sm-3 control-label">{{ 'ad_title' | translate }}</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="adName" name="adName" ng-model="ad.name" required ng-pattern="/^[a-zA-Z0-9_\-\.\!\s]+$/" ng-maxlength="128" />
        <p ng-show="adForm.adName.$error.required && !adForm.adName.$pristine" class="help-block">{{ 'ad_title' | translate }} {{ 'isRequired' | translate }}</p>
        <p ng-show="adForm.adName.$error.maxlength && !adForm.adName.$pristine" class="help-block">{{ 'error.validation.mustBeLessThan' | translate}} 128 {{ 'error.validation.charactersLong' | translate}}</p>
        <p ng-show="adForm.adName.$invalid && !adForm.adName.$pristine" class="help-block">{{ 'Invalid' | translate }} {{ 'ad_title' | translate }} {{ 'error.validation.title' | translate}}</p>
    </div>
    <div class="form-group-required"></div>
</div>

我使用bootstrap并使用不同的<p> HTML标记根据错误情况在页面中显示错误消息：

最大长度
需要
无效（正则表达式）

Answer 3

试试这个

<div ng-class="{ 'has-error' : checkError()">

在控制器中

$scope.checkError(){
    //here you can return true or false in case of of form is invalid or some other conditions


}

将动态字符串放入ng-class中

3 个答案: