【问题标题】:same ng message displaying multiple times多次显示相同的 ng 消息
【发布时间】:2016-08-31 14:18:22
【问题描述】:

我正在使用 angular 版本 1.5.5,最近升级到 angular material 1.1.0。升级后,我开始在 ng 消息中遇到一些问题。最初没有显示 ng 消息。我通过引用git issue添加下面的类来修复它

md-input-container .md-input-message-animation:not(.ng-animate) {
    opacity: 1;
    margin-top: 0px;
}

现在相同的 ng 消息显示多次。

<div class="inputbox-area" ng-form='subForm'>
    <md-input-container class="md-block" ng-repeat="item in dg.inputArr">
        <label>Level {{$index+1}}</label>
        <input md-maxlength="32" maxlength="32" ng-change="dg.showErrors = false"  name="{{item.Level}}" required ng-model="item.Name"  ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
        <div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
            <div ng-message="required">Level {{$index+1}} is mandatory</div>
            <div ng-message="md-maxlength">should be less than 32 characters long.</div>
            <div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
            <div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
        </div>
    </md-input-container>
</div>

有什么建议我哪里出错了吗?

【问题讨论】:

    标签: angularjs angular-material ng-messages angular-material2


    【解决方案1】:
    <div class="inputbox-area" ng-form='subForm'>
        <md-input-container class="md-block" ng-repeat="item in dg.inputArr">
            <label>Level {{$index+1}}</label>
            <input md-maxlength="32" maxlength="32" ng-model-options="{ updateOn: 'submit' }" ng-change="dg.showErrors = false"  name="{{item.Level}}" required ng-model="item.Name"  ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
            <div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
                <div ng-message="required">Level {{$index+1}} is mandatory</div>
                <div ng-message="md-maxlength">should be less than 32 characters long.</div>
                <div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
                <div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
            </div>
        </md-input-container>
    </div>    
    

    问题是每次触发事件时您的模型都会更新,因此请在输入框中添加ng-model-options="{ updateOn: 'submit' }",这只会在您提交该表单时触发

    【讨论】:

      【解决方案2】:

      我不是 100% 确定,但我认为 ng-messages 应该像这样引用输入字段的名称:

      ng-messages="subForm.{{item.Level}}.$error"
      

      我不知道这个sintax是否可行,但试试看是否可行。

      【讨论】:

        猜你喜欢
        • 2011-11-12
        • 1970-01-01
        • 2019-07-03
        • 1970-01-01
        • 2021-06-11
        • 1970-01-01
        • 1970-01-01
        • 2021-06-02
        • 2017-02-05
        相关资源
        最近更新 更多