feat(admin-ui): Validate slug pattern in product detail form

Relates to #103
vendure-ecommerce · May 29, 2019 · 29509d8 · 29509d8
1 parent 220d861
commit 29509d8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html
@@ -58,8 +58,12 @@
                                     (input)="updateSlug($event.target.value)"
                                 />
                             </vdr-form-field>
-                            <vdr-form-field [label]="'catalog.slug' | translate" for="slug">
-                                <input id="slug" type="text" formControlName="slug" />
+                            <vdr-form-field
+                                [label]="'catalog.slug' | translate"
+                                for="slug"
+                                [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
+                            >
+                                <input id="slug" type="text" formControlName="slug" pattern="[a-z0-9_-]+" />
                             </vdr-form-field>
                             <vdr-rich-text-editor
                                 formControlName="description"

diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json
@@ -86,6 +86,7 @@
     "set-as-featured-asset": "Set as featured asset",
     "sku": "SKU",
     "slug": "Slug",
+    "slug-pattern-error": "The slug may only contain letters, numbers, - and _",
     "stock-on-hand": "Stock",
     "tax-category": "Tax category",
     "taxes": "Taxes",