javascript - Ng-messages 动态表单和输入名称

Question

tl;博士;
似乎无法嵌入类似 ng-messages 指令。当您嵌入它时，它无法正确绑定(bind)。我有 2 个解决方法，但都有其缺点。有人有更好的解决方案还是我做错了什么？
我正在使用 typescript 。

版本
AngularJS:1.6.1
Angular 动画:1.6.1
Angular 咏叹调:1.6.1
Angular 消息:1.6.1
Angular Material :1.1.0
typescript :3.10.5

我要什么
我有一个格式化日期的组件(做了更多，但这不相关)并显示它。其中一些组件包含在同一页面上。围绕这些组件的是一种形式。我想使用自定义 ng-messages 验证此表单，例如当日期在将来时会显示错误消息。

有什么问题
当我将自定义错误消息嵌入到组件时，绑定(bind)失败。有一个错误(Angular-material 在输入字段下显示一条红线)但属于该错误的消息未显示。

它什么时候起作用？
当我不包含 ng-messages，而是将它们与组件的 html 内联时，会显示错误消息。这里唯一的问题是表单名和输入名是动态的(通过组件绑定(bind)定义)所以我需要使用 this.$eval($ctrl.inputName+'Form.'+$ctrl.inputName)['$error'] ，我真的不想使用(来自 GitHub AngularJS issues )。

它看起来怎样？

在 WorkHoursController 中，我检查日期的有效性。如果一个无效，我设置 $setValidity从那里的子表单的输入字段。这就是我使用动态表单和表单项名称的原因(还有超过 1 个 datepicker.html 嵌入到 workhours.html，因此我不能使用静态名称)。

我想要的(但不起作用)
将整个 ng-message div 嵌入到组件中，不带 this.$eval()工作时间.html

<div layout="column" layout-fill ng-cloak>
    <md-content>
        <form name="bigForm" novalidate>
            <div class="formCard md-whiteframe-2dp">
                <h4>Workhours</h4>
                <date-picker title="Select workhours"
                                       model="$ctrl.time.workhour"
                                       input-name="workhour">
                    <div ng-messages="workhourForm.workhour.$error">
                        <div ng-message="inFuture">You cannot plan workhours in the future</div>
                    </div>
                </date-picker>
            </div>
        </form>
    </md-content>
</div>

日期选择器.html

<ng-form name="{{$ctrl.inputName}}Form">
    <md-input-container class="md-block" ng-click="$ctrl.showPicker()">
        <input ng-model="$ctrl.formattedModel"
               aria-label="Open dateTimePicker"
               name="{{$ctrl.inputName}}"
               readonly
               ng-transclude>
    </md-input-container>
</ng-form>

以这种方式执行此操作时，将不会显示错误消息。只有红线。所以嵌入有问题。


我可以想到2个解决方法。两者都有缺点。。
选项 1 - 工作代码
在组件本身中定义 ng-messages
日期选择器.html

<ng-form name="{{$ctrl.inputName}}Form">
    <md-input-container class="md-block" ng-click="$ctrl.showPicker()">
        <input ng-model="$ctrl.formattedModel"
               aria-label="Open dateTimePicker"
               name="{{$ctrl.inputName}}"
               readonly>
        <div ng-messages="this.$eval($ctrl.inputName+'Form.'+$ctrl.inputName)['$error']">
            <div ng-message="inFuture">You cannot plan workhours in the future</div>
        </div>
    </md-input-container>
</ng-form>

这样，所有消息都在 Datepicker.html 中定义。因此，我无法添加任何自定义消息，只能使用预定义消息。这不是我想要的，因为这个组件可以在多种情况下使用，每种情况都有自己的业务规则。

选项 2 - 工作代码(有 1 个错误)
将 ng-messages 嵌入到组件中
日期选择器.html

<ng-form name="{{$ctrl.inputName}}Form">
    <md-input-container class="md-block" ng-click="$ctrl.showPicker()">
        <input ng-model="$ctrl.formattedModel"
               aria-label="Open dateTimePicker"
               name="{{$ctrl.inputName}}"
               readonly>
        <div ng-messages="this.$eval($ctrl.inputName+'Form.'+$ctrl.inputName)['$error']" ng-transclude>

        </div>      
    </md-input-container>
</ng-form>

工作时间.html

<div layout="column" layout-fill ng-cloak>   
    <md-content>
        <form name="bigForm" novalidate>
            <div class="formCard md-whiteframe-2dp">
                <h4>workhours</h4>
                <date-picker title="Select workhours"
                                       model="$ctrl.time.workhours"
                                       input-name="workhours">
                    <div ng-message="inFuture">You cannot plan workhours in the future</div>               
                </date-picker>
            </div>
        </form>
    </md-content>
</div>

使用此选项，ng-messages 是动态的，可以添加任何您想要的内容。但是类 md-input-message-animation不添加。什么导致大文本和错误消息没有动画。可以手动添加这个类，但是在嵌入中出现了问题。
(左为错，右为右)


我的问题
我无法弄清楚两件事。有人可以帮我解决这两个问题吗？

如何在不使我的组件成为
指令(在 HTML 和组件之间放置一个指令
是一个选项)？

如何删除 this.$eval($ctrl.inputName+'Form.'+$ctrl.inputName)['$error'] 的使用并且仍然使代码与动态表单和表单域名称一起工作？

提前致谢。

Answer 1

在阅读了其他一些帖子并尝试了很多东西之后，我找到了问题的答案。
问题1的解答
这是 Material 设计中的问题。我可以用 $postLink 来解决这个问题在我的日期选择器组件中起作用。然而这个问题不是这个组件的责任。因此，一个也符合面向对象准则的解决方案我需要制定一个指令，将缺少的类添加到每个嵌入的元素。
指令(custom-ng-message)

class CustomNgMessageLinkController {
    constructor(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) {
        element.addClass('md-input-message-animation');
    }
}

function CustomNgMessageDirective(): ng.IDirective {
   return {
       restrict: 'A',
       scope: {},
       link: CustomNgMessageLinkController
   };
}

使用此指令，我可以执行以下操作:

<div custom-ng-message ng-message="inFuture">You cannot plan workhours in the future</div>

这将转化为预期结果:


问题2的解答
我将此解决方案基于我的问题中的“选项 2 - 工作代码(有 1 个错误)”示例。为了完成这项工作，我必须创建和额外的范围属性( formName )，在 Controller 中创建表单名称(而不是像我以前那样在 HTML 中)并在返回字段的 Controller 中添加额外的函数(一个对象 ng.INgModelController)。
我在日期选择器组件的构造函数中添加了:

constructor(private $scope: ng.IScope) {
    this.formName = this.inputName + 'Form';
}

日期选择器组件中的新方法:

/**
 * Gets the form of the scope and returns the input field
 * @return {ng.INgModelController}
 */
getFormInput(): ng.INgModelController {
    let formName = this.inputName + 'Form';
    return this.$scope[formName][this.inputName];
}

此方法与 this.$eval 几乎相同。 .唯一的区别是它不会造成安全问题。
现在我可以使用 formName在 HTML 中像这样:

<ng-form name="{{$ctrl.formName}}">
    <md-input-container class="md-block" ng-click="$ctrl.showPicker()">
        <input ng-model="$ctrl.formattedModel"
               aria-label="Open dateTimePicker"
               name="{{$ctrl.inputName}}"
               readonly>
        <div ng-messages="$ctrl.getFormInput().$error" ng-transclude>
        </div>
    </md-input-container>
</ng-form>

这允许我使用动态表单和输入名称。这很有用，因为我在一页上有多个此组件。

我如何设置错误
在我的 WorkHours Controller 中，我可以验证 MomentJS日期并设置错误消息，如下所示:

constructor($scope: IWorkHourScope) {
   $scope.$watch(() => {
       return this.time.workhour;
   }, (newValue: Moment, oldValue: Moment) => {
       if (newValue > moment()) {                       
          $scope.timeSheetForm.workHourForm.workhour.$setValidity('inFuture', false);
       }
   });
}

这也使得为我的表单项创建所需的接口(interface)变得更加容易，因为所有表单都有不同的名称，我可以为每个子表单分配正确的属性。

interface IWorkDateForm {
    workhour: ng.INgModelController;
}

interface IIllNessDateForm {
    illness: ng.INgModelController;
}

interface ITimeForm extends ng.IFormController {
    workhourForm: IWorkDateForm;
    illNessForm: IIllNessDateForm;       
}
   
interface ITimeSheetScope extends ng.IScope {
    timeForm: ITimeForm;
}

这样我就不必使用 ' any ' 对于我的表单，我可以从 AngularJS 库中自动完成。