add properties to custom section v8

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Koen van Ras-Neve 56 posts 361 karma points c-trib

Oct 11, 2019 @ 08:32

Hi,

I'm building a section where I want to add Umbraco properties and custom properties to my view. (in Umbraco v8)

I read and implemented code from the following code: http://www.enkelmedia.se/blogg/2013/12/4/umbraco-7-use-the-rich-text-editor-tinymce-in-a-custom-section/

Though when I try to load the property I get the following result on the page: enter image description here

And the following browser console error:

Error: "[$compile:ctreq] Controller 'valFormManager', required by directive 'valPropertyMsg', can't be found!
https://errors.angularjs.org/1.7.5/$compile/ctreq?p0=valFormManager&p1=valPropertyMsg"

My code: HTML

<ng-form>
    <umb-property property="property"
                  ng-repeat="property in model.properties">
        <umb-editor model="property"></umb-editor>
    </umb-property>
</ng-form>

$scope.properties = [{
    label: 'bodyText',
    description: 'Load some stuff here',
    view: 'rte',
    config: {
        editor: {
            toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
            stylesheets: [],
            dimensions: { height: 400, width: 250 }
        }
    }
}];

Anyone able to help me out adding textstring fields (or any other type of field I can use as an example) to my section?

Copy Link

Mark Drake 134 posts 458 karma points c-trib

Jan 30, 2020 @ 04:10
101
Hey mate! Sorry nobody ever responded to this.

I ran into your post while searching for help with this exact issue.

The following update to your HTML should do the trick:
```
<ng-form val-form-manager>
    <umb-property property="property"
                  ng-repeat="property in model.properties">
        <umb-editor model="property"></umb-editor>
    </umb-property>
</ng-form>
```
In the code above, I've added val-form-manager as an attribute to <ng-form>.
Copy Link
J 447 posts 864 karma points

Jan 20, 2022 @ 15:29

0

I have the above code and i can see the editor in my custom section.

Did anyone figure out how to make this editor validate so if no text is entered it throws an error?

Cant find any documentation to configure this.

Thanks

Copy Link
Mark Drake 134 posts 458 karma points c-trib

Jan 20, 2022 @ 16:04
1
I noticed in a few places there's a reference to val-property-validator. It seems to take a JS function. I assume the function needs to return a properly formatted response:
```
{ 
    isValid: true, // or false
    errorMsg: "string",
    errorKey: "string"
}
```
Here's one example of HTML for the eyedropper, and its validation function.

There's mention that the ng-required directive works OOTB too, without any need of the custom javascript function above.

I apologize for not testing this before commenting. I'm not exactly sure where these directives need to be placed in the code above and I have a few deadlines. Hopefully someone else can jump in to help get you across the finish line!
Copy Link
J 447 posts 864 karma points

Jan 20, 2022 @ 16:10
0
Thanks Mark!

I have the below code which doesnt work but like you say hopefully someone could jump in and assist
```
<umb-property-editor name="contentDetails" model="rteDetails" ng-required="true" required></umb-property-editor>
```
I will look at the links sent and can post my controller code if anyone needs it. The editor displays with data from a database but deleting the text never really fires any validation message.

Thanks again
Copy Link
is working on a reply...

Please Sign in or register to post replies