grid control validation

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

Jonathan Roberts 409 posts 1063 karma points

Jan 16, 2018 @ 14:32

Hi,

I am building a simple Grid control and I wondered if it was possible to make any of the fields "Required" ? If it is possible does anyone have any sample code to put validation into the grid?

<div ng-controller="sgrid.quotecontroller">
<textarea rows="1"
          umb-auto-resize
          umb-auto-focus
          class="textstring input-block-level" id="{{control.uniqueId}}_text"
          ng-model="control.value.quote"
          ng-attr-style="{{control.editor.config.style}}" style="font-weight:bold; font-size:20px;" placeholder="Quote text..."></textarea>

<textarea rows="1"
          umb-auto-resize
          class="textstring input-block-level" id="{{control.uniqueId}}_text"
          ng-model="control.value.source"
          ng-attr-style="{{control.editor.config.style}}" placeholder="Quote Source..."></textarea>
</div>

Thanks

Jon

Copy Link

Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib

Jan 23, 2018 @ 09:13
0
Hi Jonathan,

Umbraco uses Angular for validation, so the fields will be required if you add a required attribute - eg:
```
<textarea rows="1"
          umb-auto-resize
          umb-auto-focus
          required
          class="textstring input-block-level" id="{{control.uniqueId}}_text"
          ng-model="control.value.quote"
          ng-attr-style="{{control.editor.config.style}}" style="font-weight:bold; font-size:20px;" placeholder="Quote text..."></textarea>
```
Alternatively you can use ng-required instead to use a condition - if a setting telling whether the field you in fact be required.
Copy Link
Jonathan Roberts 409 posts 1063 karma points

Jan 23, 2018 @ 09:20

0

That is great - how do you set a Required warning next to the correct field in the Grid?

Copy Link
Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib

Jan 23, 2018 @ 09:27

100

A required field will get a red border if you hit Save, and the field doesn't have a value. Is that sufficient?

Otherwise it gets a bit more complex. I did this for one of my packages - you can see that here:

https://github.com/skybrud/Skybrud.ImagePicker/blob/master/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Directives/ImagePicker.js#L23

The trick is to give the element (field) a unique ID, and you can then check whether that element has some of the classes added by Angular during validation.

Copy Link
Jonathan Roberts 409 posts 1063 karma points

Jan 23, 2018 @ 09:53

0

Fantastic - thanks again for all your help

:)

Copy Link
is working on a reply...

Please Sign in or register to post replies