Question

我有以下表格：

        <form name="newCollectionForm" ng-submit="onSubmit()">
            <md-input-container class="md-block">
                <label>Name</label>
                <input name="collection"
                       ng-model="new_collection_model"
                       ng-trim="true"
                       ng-minlength="3"
                       ng-maxlength="50"
                       md-maxlength="50"
                       required>
                <div ng-messages="newCollectionForm.collection.$error">
                    <div ng-message="required">You must supply a name for the Collection.</div>
                    <div ng-message="maxlength">The name must no contain more than 50 characters.</div>
                    <div ng-message="minlength">The name must be at least 3 characters.</div>
                </div>
            </md-input-container>
        </form>

唯一的问题是它没有显示错误消息。它只显示错误状态，但没有显示相应的消息。

我尝试了很多变种而没有成功。

任何帮助？

Answer 1

我为你创造了一个plunker。

https://plnkr.co/edit/MvFaXjseWt8ILRpsbftq?p=preview

您必须执行以下操作才能使代码正常工作。

1：在模块中注入ngMessages。

var app = angular.module('app', ['ngMessages']);

2：在你的代码中包含这个js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

希望这会对你有所帮助。

Answer 2

好吧，至少我可以显示消息做出一些改变：

        <form name="newCollectionForm" ng-submit="onSubmit()" novalidate>
            <md-input-container class="md-block">
                <label>Name</label>
                <input name="collection"
                       ng-model="new_collection_model"
                       ng-trim="true"
                       ng-minlength="3"
                       ng-maxlength="50" md-maxlength="50" required>
                <div ng-show="newCollectionForm.collection.$error" role="alert">
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.required">You must supply a name for the Collection.</div>
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.maxlength">The name must no contain more than 50 characters.</div>
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.minlength">The name must be at least 3 characters.</div>
                </div>
            </md-input-container>
        </form>

输入中的角度误差

2 个答案: