Skip to content

Commit 7c248d5

Browse files
chrispymmchrispymm
committed
feat(add-another): wip - error message handling
1 parent 83b9994 commit 7c248d5

File tree

1 file changed

+159
-0
lines changed
  • docs/components/add-another/examples/errors

1 file changed

+159
-0
lines changed

‎docs/components/add-another/examples/errors/index.njk‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
layout: 'layouts/example.njk'
3+
---
4+
5+
{%- from "govuk/components/button/macro.njk" import govukButton -%}
6+
{%- from "govuk/components/input/macro.njk" import govukInput -%}
7+
{%- from "govuk/components/date-input/macro.njk" import govukDateInput -%}
8+
{%- from "moj/components/add-another/macro.njk" import mojAddAnother -%}
9+
{%- from "moj/components/add-another/macro.njk" import mojAddAnotherItem -%}
10+
{%- from "govuk/components/fieldset/macro.njk" import govukFieldset -%}
11+
12+
13+
<form method="post">
14+
<h2 class="govuk-heading-l moj-add-another__heading" tabindex="-1">Add people</h2>
15+
16+
{% set templateHtml %}
17+
{% call mojAddAnotherItem({ legend: { text: "Person" } }) -%}
18+
{{ govukInput({
19+
id: "person[0][first_name]",
20+
name: "person[0][first_name]",
21+
label: {
22+
text: "First name"
23+
},
24+
attributes: {
25+
"data-name": "person[%index%][first_name]",
26+
"data-id": "person[%index%][first_name]",
27+
"data-label": "First name"
28+
}
29+
}) }}
30+
31+
{{ govukInput({
32+
id: "person[0][last_name]",
33+
name: "person[0][last_name]",
34+
label: {
35+
text: "Last name"
36+
},
37+
attributes: {
38+
"data-name": "person[%index%][last_name]",
39+
"data-id": "person[%index%][last_name]",
40+
"data-label": "Last name"
41+
}
42+
}) }}
43+
44+
{% endcall %}
45+
{% endset %}
46+
47+
{% call mojAddAnother({ templateHtml: templateHtml, itemLabel: "Person" }) %}
48+
{% call mojAddAnotherItem({ legend: { text: "Person 1 of 3" } }) -%}
49+
{{ govukInput({
50+
id: "person[0][first_name]",
51+
name: "person[0][first_name]",
52+
label: {
53+
text: "First name"
54+
},
55+
errorMessage: {
56+
text: "Enter your first name"
57+
},
58+
attributes: {
59+
"data-name": "person[%index%][first_name]",
60+
"data-id": "person[%index%][first_name]",
61+
"data-label": "First name"
62+
}
63+
}) }}
64+
65+
{{ govukInput({
66+
id: "person[0][last_name]",
67+
name: "person[0][last_name]",
68+
label: {
69+
text: "Last name"
70+
},
71+
errorMessage: {
72+
text: "Enter your last name"
73+
},
74+
attributes: {
75+
"data-name": "person[%index%][last_name]",
76+
"data-id": "person[%index%][last_name]",
77+
"data-label": "Last name"
78+
}
79+
}) }}
80+
81+
{% endcall %}
82+
{% call mojAddAnotherItem({ legend: { text: "Person 2 of 3" } }) -%}
83+
{{ govukInput({
84+
id: "person[1][first_name]",
85+
name: "person[1][first_name]",
86+
label: {
87+
text: "First name"
88+
},
89+
errorMessage: {
90+
text: "Enter your first name"
91+
},
92+
attributes: {
93+
"data-name": "person[%index%][first_name]",
94+
"data-id": "person[%index%][first_name]",
95+
"data-label": "First name"
96+
}
97+
}) }}
98+
99+
{{ govukInput({
100+
id: "person[1][last_name]",
101+
name: "person[1][last_name]",
102+
label: {
103+
text: "Last name"
104+
},
105+
errorMessage: {
106+
text: "Enter your last name"
107+
},
108+
attributes: {
109+
"data-name": "person[%index%][last_name]",
110+
"data-id": "person[%index%][last_name]",
111+
"data-label": "Last name"
112+
}
113+
}) }}
114+
115+
{% endcall %}
116+
{% call mojAddAnotherItem({ legend: { text: "Person 3 of 3" } }) -%}
117+
{{ govukInput({
118+
id: "person[2][first_name]",
119+
name: "person[2][first_name]",
120+
label: {
121+
text: "First name"
122+
},
123+
errorMessage: {
124+
text: "Enter your first name"
125+
},
126+
attributes: {
127+
"data-name": "person[%index%][first_name]",
128+
"data-id": "person[%index%][first_name]",
129+
"data-label": "First name"
130+
}
131+
}) }}
132+
133+
{{ govukInput({
134+
id: "person[2][last_name]",
135+
name: "person[2][last_name]",
136+
label: {
137+
text: "Last name"
138+
},
139+
errorMessage: {
140+
text: "Enter your last name"
141+
},
142+
attributes: {
143+
"data-name": "person[%index%][last_name]",
144+
"data-id": "person[%index%][last_name]",
145+
"data-label": "Last name"
146+
}
147+
}) }}
148+
149+
{% endcall %}
150+
{% endcall %}
151+
152+
<div class="moj-button-action">
153+
{{ govukButton({
154+
text: "Continue"
155+
}) }}
156+
</div>
157+
158+
</form>
159+

0 commit comments

Comments
 (0)