- Adres
+ Adres
Land
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -35,9 +35,9 @@
Gemeente
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -84,9 +84,9 @@
Postcode
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -144,9 +144,9 @@
Straat
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -199,9 +199,9 @@
Huisnummer
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -259,9 +259,9 @@
Busnummer
-
- {{ '(verplicht)' }}
-
+ VERPLICHT
@@ -342,12 +342,14 @@ import { CrabApiService } from '@services/crab-api.service';
import { requiredIf } from '@utils/i18n-validators';
const props = withDefaults(defineProps(), {
+ hideTitle: false,
+ showRequiredPerField: false,
config: () => ({
land: { required: true },
gemeente: { required: true },
postcode: { required: true },
straat: { required: true },
- huisnummer: { required: false },
+ huisnummer: { required: true },
busnummer: { required: false },
}),
api: 'https://test-geo.onroerenderfgoed.be/',
@@ -506,6 +508,7 @@ const rules = computed(() => ({
// Init validation instance
const v$ = useVuelidate(rules, adres, { $lazy: true });
+defineExpose({ validate: () => v$.value.$validate() });
// Reference data
const crabApiService = new CrabApiService(props.api);
diff --git a/src/models/adres.ts b/src/models/adres.ts
index 068ce55..cac7035 100644
--- a/src/models/adres.ts
+++ b/src/models/adres.ts
@@ -1,11 +1,13 @@
import type { ILocatieAdres } from '@models/locatie';
export interface IAdresProps {
+ hideTitle?: boolean;
api?: string;
config?: IAdresConfig;
countryId?: string;
adres?: ILocatieAdres;
optionsLimit?: number;
+ showRequiredPerField?: boolean;
}
export interface IAdresConfig {
diff --git a/src/stories/smart-components/adres.stories.ts b/src/stories/smart-components/adres.stories.ts
index 0dbc899..cef242c 100644
--- a/src/stories/smart-components/adres.stories.ts
+++ b/src/stories/smart-components/adres.stories.ts
@@ -66,6 +66,12 @@ type Story = StoryObj;
*/
export const Default: Story = {};
+export const ShowRequiredAnnotationPerField: Story = {
+ args: {
+ showRequiredPerField: true,
+ },
+};
+
export const CustomApi: Story = {
args: {
api: 'https://test-geo.onroerenderfgoed.be/',