2016-01-19 112 views
1

我使用角NG-消息來顯示驗證消息顯示確認消息

考慮下面的代碼:

<ul ng-messages="formToValidate.fieldToValidate.$error" ng-messages-multiple> 
    <li ng-message="pattern">Invalid pattern</li> 
    <li ng-message="minlength, maxlength">Should contain no less than 7 and no more than 100 chars</li> 
    <li ng-message="!pattern && !minlength && !maxlength && onlyAfterAllOtherPassedValidation"> 
     This validation message is shown only when all the other validations have passed and validation fails on onlyAfterAllOtherPassedValidation 
    </li> 
</ul> 

我希望僅顯示,如果最後確認消息所有其他驗證都已通過,驗證在onlyAfterAllOtherPassedValidation上失敗。 我不知道是否有可能將複雜的條件傳遞給ng消息 只要我仍然可以使用ng消息,歡迎任何建議和解決方法

回答

3

您可以使用ng-if元件保持的消息,例如

<li ng-if="!formToValidate.fieldToValidate.$error.required && !formToValidate.fieldToValidate.$error.minLength && !formToValidate.fieldToValidate.$error.maxLength" ng-message="onlyAfterAllOtherPassedValidation"> 
    This validation message is shown only when all the other validations have passed and validation fails on onlyAfterAllOtherPassedValidation 
</li> 
+0

對我來說,沒有想到即使它!謝謝 –

0

當然工作由JonMac1374提出的解決方案。但最好是一勞永逸地解決這個問題。我建議你注意指令use-form-error。它有助於建立自己的支票。

jsfiddle上的現場示例。

<form name="ExampleForm"> 
    <label>Password</label> 
    <input ng-model="password" name="password" minlength="2" pattern="^\d*$" required use-form-error="onlyAfterAllOtherPassedValidation" use-error-expression="!ExampleForm.password.$error.required && !ExampleForm.password.$error.minlength && !ExampleForm.password.$error.pattern" 
    /> 
    <pre>{{ExampleForm.password.$error|json}}</pre> 
    <div ng-messages="ExampleForm.password.$error" ng-messages-multiple="true" class="errors"> 
    <div ng-message="required"> 
     Your required is wrong 
    </div> 
    <div ng-message="pattern"> 
     Your pattern is wrong 
    </div> 
    <div ng-message="minlength"> 
     Your minlength is wrong 
    </div> 
    <div ng-message="onlyAfterAllOtherPassedValidation"> 
     Your onlyAfterAllOtherPassedValidation 
    </div> 
    </div> 
</form>