Question

我正在尝试在组件上的模板中添加ng-messages，但ng-message [s]节点在被angular中的注释替换之后永远不会被激活，尽管验证恰当地标记了md-input-container使用正确的班级

md-icon-float md-input-has-value md-input-invalid

然后，由于节点永远不会被激活，因此会抛出错误：

mdInput messages show animation called on invalid messages element:

如果在组件外部，如下面的代码所示，这可以正常工作：

HTML

<md-content id="content" layout="column" flex ng-app="app" >
    <md-content flex layout="column" layout-align="center center" layout-
    padding>

    <div layout="row" ng-form="demoForm">
        <picker> </picker>
        <div>
        <h2 class="md-subhead">HTML</h2>
          <mdp-time-picker name="timeFormat" ng-model="currentTimeText" mdp-
           format="HH:mm A">
            <div ng-messages="demoForm.timeFormat.$error">
              <div ng-message="required">This is required</div>
              <div ng-message="format">Invalid format</div>
            </div>
          </mdp-time-picker>
        </div>
     </div>
     </md-content>
 </md-content>

CSS

body {
  font-family: 'Roboto', sans-serif;
}

#content { height: 100%; }

JS

(function() {
    var module = angular.module("app", [
    "ngMaterial",
    "ngAnimate",
    "ngAria",   
    "ngMessages",
    "mdPickers"]); 

module.component('picker',
               {

     template: `
     <div>
          <h2 class="md-subhead">Component</h2>
          <mdp-time-picker name="timeFormat2" ng-model="currentTimeText" 
             mdp-format="HH:mm A">
             <div ng-messages="demoForm.timeFormat2.$error">
             <div ng-message="format">Invalid format</div>                   
            </div>
          </mdp-time-picker>
        </div>`,
     controller: "MainCtrl"
});


module.controller("MainCtrl", ['$scope', '$mdpDatePicker', 
'$mdpTimePicker', function($scope, $mdpDatePicker, $mdpTimePicker){

}]);
})();

具有@ https://codepen.io/anon/pen/BwrXqg工作版本的代码笔。

任何想法如何使这个工作？

Answer 1

当我使用指令vs组件时，我能够使它工作。

  module.directive('picker', function() {
     return {
        template: `
        <div>
          <h2 class="md-subhead">Component</h2>
          <mdp-time-picker name="timeFormat2" ng-model="currentTimeText" mdp-format="HH:mm A">
            <div ng-messages="demoForm.timeFormat2.$error" md-auto-hide="false">
             <div ng-message="format">Invalid format</div>                   
            </div>
          </mdp-time-picker>
        </div>
        `,
        controller: "MainCtrl" // not sure you need this
};

}

示例：https://codepen.io/anon/pen/xXjWjb

另见： https://docs.angularjs.org/guide/component#comparison-between-directive-definition-and-component-definition

您可能还需要弄清楚如何传递元素/表单名称和模型值。

Answer 2

您无法在组件中使用private ArrayList<String> removeGen(int addLines, int labLines, int venLines, ArrayList<String> values){ ArrayList<String> copy = new ArrayList<>(); copy = (ArrayList<String>) values.clone(); for(int i = 0; i < values.size(); i++) { if (i > 100 && i < (100 + (addLines * 5) + 1)) { copy.remove(i); } if (i > (100 + (addLines * 5)) + 9 && i < 100 + (addLines * 5) + (labLines * 4) + 10) { copy.remove(i); } if (i > 100 + (addLines * 5) + (labLines * 4) + 21 && i < 100 + (addLines * 5) + (labLines * 4) + (venLines * 4) + 22) { copy.remove(i); } } return copy;，因为它有自己独立的范围（https://docs.angularjs.org/guide/component#comparison-between-directive-definition-and-component-definition）

只需更改您的组件模板即可使用它自己的表单控制器（或通过绑定传递其引用）

demoForm

组件内部模板中的Ng消息不起作用

HTML

CSS

JS

2 个答案: