Hi,

I've been making a property editor to hold multiple 'items' of content recently. These items can be seen below

The adding and editing of these items is done through a custom infinite editor launched with editorService.open(x) as seen below

Editor view

<div ng-controller="AD.Bootstrap5.Tabs.ItemEditorController as vm">

    <form name="tabItemForm" novalidate val-form-manager>

        <umb-editor-view>

            <umb-editor-header
                name="model.title"
                name-locked="true"
                hide-alias="true"
                hide-icon="true"
                hide-description="true">
            </umb-editor-header>

            <umb-editor-container>

                <umb-box>
                    <umb-box-content class="block-form">
                        <label class="control-label">Name <strong class="umb-control-required">*</strong></label>
                        <div>
                            <umb-property-editor model="propName"></umb-property-editor>
                        </div>
                    </umb-box-content>
                </umb-box>

                <umb-box>
                    <umb-box-content class="block-form content-type-editor-dialog edit-property-settings">
                        <label class="control-label">Content</label>
                        <div>
                            <umb-property-editor model="propContent"></umb-property-editor>
                        </div>
                    </umb-box-content>
                </umb-box>

            </umb-editor-container>

            <umb-editor-footer>
                <umb-editor-footer-content-right>
                    <umb-button type="button"
                                button-style="link"
                                label-key="general_close"
                                shortcut="esc"
                                action="vm.close()">
                    </umb-button>
                    <umb-button type="button"
                                button-style="success"
                                label-key="general_submit"
                                state="vm.saveButtonState"
                                action="vm.submit(model)">
                    </umb-button>
                </umb-editor-footer-content-right>
            </umb-editor-footer>

        </umb-editor-view>

    </form>

</div>

Editor controller

angular.module("umbraco")
    .controller("AD.Bootstrap5.Tabs.ItemEditorController",
        function ($scope, editorService, notificationsService) {
            const vm = this;

            /* Property editors */
            $scope.propName = {
                view: "textbox",
                value: $scope.model.item.name,
                required: true,
                config: {}
            };
            $scope.propContent = {
                view: "rte",
                value: $scope.model.item.content,
                config: {

                }
            };

            /* Methods */
            function validate() {
                if (!$scope.propName.value || $scope.propName.value.length < 1) {
                    notificationsService.error("The 'Name' field is required");
                    return false;
                }

                return true;
            }
            vm.validate = validate;

            /* Buttons */
            function submit() {
                if (!vm.validate()) return;

                if ($scope.model && $scope.model.submit) {// && formHelper.submitForm({ scope: $scope })) {
                    $scope.model.submit({
                        name: $scope.propName.value,
                        content: $scope.propContent.value
                    });
                }
            }

            function close() {
                if ($scope.model && $scope.model.close) {
                    $scope.model.close();
                }
            }

            vm.submit = submit;
            vm.close = close;
        });

The code I have works well enough for adding and editing these items, however as you can see from the code I would like the 'name' property, exposed through umb-property-editor under propName, to be a required field.

So far I've tried manually validating it through my validate() function, however notificationsService.error(x) seems to be incorrect for infinite editors as it shows below the editor on the dashboard.

My question is: What is the correct way to validate a umb-property-editor like it is in other parts of Umbraco? Such as having a red label, red boarder around the input, and a message near the field or error toast on validation failure as I've seen before. And am I going the wrong direction with what I have already?