是否可以使用 ngMessages 制作可重用的表单组件？

Posted 2023-02-23

【中文标题】是否可以使用 ngMessages 制作可重用的表单组件？

【英文标题】：Is it possible to make reusable form components with ngMessages?

【发布时间】：2016-03-24 19:00:52

【问题描述】：

这里是html代码，我想做一个指令

<div class="form-group" ng-class="'has-success':signupForm.username.$touched && signupForm.username.$valid,'has-error':signupForm.username.$touched && signupForm.username.$invalid,'has-feedback':signupForm.username.$touched ">
    <input tabindex="1" type="text" class="form-control" placeholder="username" ng-model="authCtrl.user.username" required ng-minlength='5' ng-maxlength='10' name="username" ng-pattern="/^[a-z0-9]*$/">
    <span class="glyphicon" ng-show="signupForm.username.$touched" ng-class="'glyphicon-ok form-control-feedback':signupForm.username.$touched && signupForm.username.$valid,'glyphicon-remove':signupForm.username.$touched && signupForm.username.$invalid,'form-control-feedback':signupForm.username.$touched"></span>
    <div ng-messages="signupForm.username.$error" ng-show="signupForm.username.$touched">
        <div ng-messages-include="/static/app/components/widget/widget.view.input-error.html"></div>
    </div>
</div>

但我不知道如何为任何组件传递变量，即 formname.inputname.$error

更新：目前的进展：

模板：

    <widget-form-input
  input-type='authCtrl.input.username.type'
  input-placeholder='authCtrl.input.username.placeholder'
  input-name='authCtrl.input.username.name'
  input-model='authCtrl.user.username'></widget-form-input>

指令：

    function widgetFormInput()
        var input = ;
        input.restrict = 'E';
        input.scope = 
            'inputType' : '=',
            'inputPlaceholder' : '=',
            'inputName' : '=',
            'inputModel' : '=',
            'inputMaxlength' : '=?',
            'inputMinlength' : '=?',
            'inputPattern' : '=?',
        
        input.templateUrl = '/static/app/components/widget/widget.view.form-input.html';
        return input;
    

指令模板：

<div class="form-group" ng-class="'has-success':signupForm.inputName.$touched && signupForm.inputName.$valid,'has-error':signupForm.inputName.$touched && signupForm.inputName.$invalid,'has-feedback':signupForm.inputName.$touched ">
<input tabindex="1" type="text" class="form-control" placeholder="inputPlaceholder" ng-model="inputModel" required ng-minlength='inputMinlength' ng-maxlength='inputMaxlength' name="inputName" ng-pattern="inputPattern">
<span class="glyphicon" ng-show="signupForm.inputName.$touched" ng-class="'glyphicon-ok form-control-feedback':signupForm.inputName.$touched && signupForm.inputName.$valid,'glyphicon-remove':signupForm.inputName.$touched && signupForm.inputName.$invalid,'form-control-feedback':signupForm.inputName.$touched"></span>
<div ng-messages="signupForm.inputName.$error" ng-show="signupForm.inputName.$touched">
    <div ng-messages-include="/static/app/components/widget/widget.view.input-error.html"></div>
</div>

【问题讨论】：

ng-messages 已经是一个指令了。

我知道，我想要的是制作一个指令，该指令将具有验证输入，以便我可以重复使用它。

更新有问题。

有人可以帮忙吗？

【参考方案1】：

您已经将输入名称作为输入名称传递。这可以。您还需要传递表单名称。但是您正在创建隔离范围。也传递表单名称，如下所示：

<widget-form-input
  input-type='authCtrl.input.username.type'
  input-placeholder='authCtrl.input.username.placeholder'
  input-name='authCtrl.input.username.name'
  input-model='authCtrl.user.username'
  form-name='signupForm'></widget-form-input>

像这样更新指令范围：

 input.scope = 
            'inputType' : '=',
            'inputPlaceholder' : '=',
            'inputName' : '=',
            'inputModel' : '=',
            'inputMaxlength' : '=?',
            'inputMinlength' : '=?',
            'inputPattern' : '=?',
            'formName' : '@' //This will be treated as a string
        

最后，像这样更新你的指令模板：

<div class="form-group" ng-class="'has-success':formName.inputName.$touched && formName.inputName.$valid,'has-error':formName.inputName.$touched && formName.inputName.$invalid,'has-feedback':formName.inputName.$touched ">

您将需要更新指令模板中各处的硬编码表单名称，以指向 formName 变量。