是否可以使用ngMessages創建可重用的表單組件？

下面是HTML代碼，我想打一個指令是否可以使用ngMessages創建可重用的表單組件？

<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。$錯誤

更新：迄今取得的進展：

模板：

<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>

來源

2015-12-18 Gopal

NG的消息已經是一個指令。 – Vivek

我知道，我想要的是制定一個指令，它將有驗證輸入，以便我可以重用它。 – Gopal

有問題。 – Gopal

您已經傳遞inputname爲inputName。這可以。你也需要傳遞表單名稱。但是你正在創建隔離範圍。通過表格名稱爲好，像這樣：

<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變量。

來源

2016-01-21 08:25:12 Devner

是否可以使用ngMessages創建可重用的表單組件？

回答

相關問題