AngularJS 指令创建 OnTheFly 文本框和验证答案

【问题标题】：AngularJS Directive Create OnTheFly Textbox and ValidationAngularJS 指令创建 OnTheFly 文本框和验证
【发布时间】：2017-05-31 16:51:35
【问题描述】：

在一个指令中，我正在动态创建一个文本框并进行验证。

texbox 正在正确创建并且可以正常工作。

请参阅 plnker：
https://plnkr.co/edit/YJIwS8bD0w5e9LbWBtlJ?p=preview

但是错误 div ng-show 没有从指令的 propErrPattern: '=' AND propErrReqr: '=' 正确生成。

我已经尝试了至少十几种方法，但没有任何效果。模板正在生成：

<p class="error" ng-show="propErrPattern || propErrReqr">
    <b class="ng-binding">Required. Length:-  Characters:</b> Letters, Numbers, Dash, Underscore, Space
</p>

<!-- instead of generating   -->
<!-- instead of generating   -->
<p class="error" ng-show="FirstName.$error.pattern || irstName.$error.required">


app.directive('textBox', function () {
    return {
        scope: {
            label: '@label',
            value: '@value',
            property: '=',
            propErrPattern: '=',
            propErrReqr: '=',
            lenMin: '@lenMin',
            lenMax: '@lenMax',
        },
        restrict: 'E',
        replace: true,
        templateUrl: 'textboxTemplate.html'
    };
});

在一个表单中，我通过以下方式调用指令：

<text-box 
    label="First Name" 
    value="FirstName" 
    property='FirstName' 
    propErrPattern='FirstName.$error.pattern' 
    propErrReqr='FirstName.$error.required' 
    lenMin='3' 
    lenMax='15'>
</text-box>

textboxTemplate.html（注意 ng-show="propErrPattern || propErrReqr"）

<div class="form-group">
    <label for="{{value}}" class="control-label col-sm-4">{{label}}</label>
    <div class="col-sm-8">
        <input type="text"
               class="form-control"
               id="{{value}}"
               name="{{value}}"
               ng-model="property"
               ng-pattern="/^[a-z\d\-_\s]+$/i" 
               ng-minlength="{{lenMin}}"
               ng-maxlength="{{lenMax}}"
               ng-trim="true"
               required />
        <!-- NOT GENERATING CORRECTLY -->
        <!-- NOT GENERATING CORRECTLY -->
        <p class="error" ng-show="propErrPattern || propErrReqr" >
            <b>Required. Length:{{lenMin}}-{{lenMax}}  Characters:</b> Letters, Numbers, Dash, Underscore, Space
        </p>
    </div>
</div>

【问题讨论】：

标签： javascript angularjs validation angularjs-directive textbox

【解决方案1】：

因此，您的实施存在许多问题。您对指令的使用应该如下所示。

<text-Box label="First Name" value="FirstName" property='FirstName' 
prop-err-pattern='myForm.FirstName.$error.pattern' 
prop-err-reqr='myForm.FirstName.$error.required' lenMin='3' lenMax='15'>
</text-Box>

请注意，指令中驼峰式大小写的属性应通过虚线“-”名称设置。也就是propErrPattern 变成了prop-err-pattern。接下来请注意，propErrPattern 和 propErrReqr 的值应以表单名称开头，在本例中为“myForm”。

这两个更改应该可以使事情正常工作。

【讨论】：

做到了！谢谢，因为我花了几个小时研究这个。