将表单填充到要与ngMessages一起使用的templateURL中

Padding form into templateURL to be used with ngMessages

本文关键字：templateURL 一起 ngMessages 填充 表单      更新时间：2023-09-26

我对angular很陌生，正在尝试指令。

我希望能够使用

<div ng-messages="form.$error">
    <div ng-message="required">You did not enter a field</div>
</div>

在这样的自定义指令中，

<div class="form-group">
    <label class="form-label" for="s-input-{{name}}">
        {{text.human}}
        <span ng-if="text.subtext" class="form-hint">{{text.subtext}}</span>
    </label>
    <select ng-required="required" ng-model="model" class="form-control"  id="s-input-{{name}}" name="{{name}}" ng-options="t for t in text.select"></select>
    <div ng-messages="form.$error">
        <div ng-message="required">You did not enter a field</div>
    </div>
</div>

我可以通过在指令元素下方但不在其中传递ng消息来使其工作。

尽管我真的不知道如何将表单传递到模板中，以便通过ng消息访问它。

我设置了一个plunker来向你展示我的基本设置。

http://plnkr.co/edit/ELx6Fd2eLN4CJjEnzRGM?p=preview

我知道我需要require: '^form',的表单，尽管我不知道如何在模板URL中使用/访问。

我已经撞到头有一段时间了，所以我真的很感激你的帮助！谢谢

当您需要带有require: '^form'的表单指令时，您可以在link函数中访问该FormController。然后，您可以简单地将该控制器连接到指令的作用域，如下所示：

link: function(scope, element, attributes, formController) {
    scope.form = formController;
}

然后在模板中引用它：

<div ng-messages="form.$error">
    <div ng-message="required">You did not enter a field</div>
</div>

您可以随时将表单传递给指令。

javascript

app.directive('selectGov', function (){ 
   return {
        restrict: 'E',
        templateUrl: 'select.html',
        scope: {
            text: "=?",
            model: "=",
            required: "=",
            selectItems: "=?",
            name: "@?",
            form: "="
        },
    };
});

html

<select-gov model="person.phoneNumberType" text="q.phoneType" required="true" name="phoneType" form="myForm"></select-gov>
相关文章：