Skip to content

Commit e966be5

Browse files
madsrasmussenmadsrasmussen
authored
Merge pull request #171 from umbraco/feature/uui-form-as-a-wrapper
uui-form as wrapper for native form element
2 parents 4662969 + 3167582 commit e966be5

File tree

10 files changed

+339
-296
lines changed

10 files changed

+339
-296
lines changed

‎packages/uui-base/lib/mixins/FormControlMixin.story.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import '.';
2+
3+
import { Story } from '@storybook/web-components';
4+
import { html } from 'lit-html';
5+
6+
export default {
7+
id: 'FormControlMixin',
8+
title: 'Inputs/Form/FormControlMixin',
9+
};
10+
11+
export const AAAOverview: Story = () =>
12+
html`
13+
<p>FormControlMixin can be used to make a web component part of a form.</p>
14+
`;
15+
AAAOverview.storyName = 'Overview';

‎packages/uui-base/lib/mixins/FormControlMixin.ts

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,22 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
168168
});
169169
}
170170

171+
/**
172+
* Determn wether this FormControl has a value.
173+
* @method hasValue
174+
* @returns {boolean}
175+
*/
171176
public hasValue(): boolean {
172177
return this.value !== '';
173178
}
174179

180+
/**
181+
* Get internal form element.
182+
* This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.
183+
* @abstract
184+
* @method getFormElement
185+
* @returns {HTMLElement | undefined}
186+
*/
175187
protected abstract getFormElement(): HTMLElement | undefined;
176188

177189
disconnectedCallback(): void {
@@ -184,6 +196,21 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
184196
}
185197
}
186198

199+
/**
200+
* Add validator, to validate this Form Control.
201+
* See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.
202+
*
203+
* @example
204+
* this.addValidator(
205+
* 'tooLong',
206+
* () => 'This input contains too many characters',
207+
* () => this._value.length > 10
208+
* );
209+
* @method hasValue
210+
* @param {FlagTypes} flagKey the type of validation.
211+
* @param {method} getMessage method to retrieve relevant message. Is executed every time the validator is re-executed.
212+
* @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.
213+
*/
187214
protected addValidator(
188215
flagKey: FlagTypes,
189216
getMessageMethod: () => String,
@@ -225,13 +252,6 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
225252
updated(changedProperties: Map<string | number | symbol, unknown>) {
226253
super.updated(changedProperties);
227254
this._runValidators();
228-
/*
229-
if(changedProperties.has('pristine')) {
230-
if(changedProperties.get('pristine') === false) {
231-
this._internals.reportValidity();
232-
}
233-
}
234-
*/
235255
}
236256

237257
private _onFormSubmit = () => {
@@ -243,7 +263,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
243263
this._form = this._internals.form;
244264
if (this._form) {
245265
// This relies on the form begin a 'uui-form':
246-
if (this._form.hasAttribute('invalid-submit')) {
266+
if (this._form.hasAttribute('submit-invalid')) {
247267
this.pristine = false;
248268
}
249269
this._form.addEventListener('submit', this._onFormSubmit);

‎packages/uui-form-layout-item/lib/form.story.ts

Lines changed: 0 additions & 182 deletions
This file was deleted.

‎packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -22,59 +22,61 @@ export const AAAOverview: Story = () => html`
2222
`;
2323
AAAOverview.storyName = 'Overview';
2424

25-
export const Example: Story = () => html` <form
26-
is="uui-form"
27-
style="max-width: 800px;">
28-
<uui-form-layout-item>
29-
<uui-label slot="label" for="phoneInput" required>Phone number</uui-label>
30-
<span slot="description"
31-
>Form item accepts a description, keep it short.</span
32-
>
33-
<div>
34-
<uui-input
35-
id="phoneInput"
36-
type="text"
37-
name="phone"
38-
placeholder="+00"
39-
required
40-
required-message="You must enter a area code"
41-
style="text-align:right; width: 75px;">
42-
</uui-input>
43-
<uui-input
44-
type="text"
45-
name="phone"
46-
placeholder=""
47-
required
48-
required-message="You must enter a phone number">
49-
</uui-input>
50-
</div>
51-
</uui-form-layout-item>
52-
<uui-form-layout-item>
53-
<uui-label slot="label" for="cityinput">City</uui-label>
54-
<span slot="description"></span>
55-
<div>
56-
<uui-input
57-
id="cityinput"
58-
type="text"
59-
name="phone"
60-
placeholder=""
61-
required
62-
required-message="You must enter a city">
63-
</uui-input>
64-
</div>
65-
</uui-form-layout-item>
66-
<uui-form-layout-item>
67-
<div>
68-
<uui-input
69-
type="text"
70-
name="postal"
71-
placeholder=""
72-
required
73-
required-message="You must enter a postal number">
74-
</uui-input>
75-
</div>
76-
</uui-form-layout-item>
25+
export const Example: Story = () => html` <uui-form>
26+
<form style="max-width: 800px;">
27+
<uui-form-layout-item>
28+
<uui-label slot="label" for="phoneInput" required>Phone number</uui-label>
29+
<span slot="description"
30+
>Form item accepts a description, keep it short.</span
31+
>
32+
<div>
33+
<uui-input
34+
id="phoneInput"
35+
type="text"
36+
name="phone"
37+
placeholder="+00"
38+
required
39+
required-message="You must enter a area code"
40+
style="text-align:right; width: 75px;">
41+
</uui-input>
42+
<uui-input
43+
type="text"
44+
name="phone"
45+
placeholder=""
46+
required
47+
required-message="You must enter a phone number">
48+
</uui-input>
49+
</div>
50+
</uui-form-layout-item>
51+
<uui-form-layout-item>
52+
<uui-label slot="label" for="cityinput">City</uui-label>
53+
<span slot="description"></span>
54+
<div>
55+
<uui-input
56+
id="cityinput"
57+
type="text"
58+
name="phone"
59+
placeholder=""
60+
required
61+
required-message="You must enter a city">
62+
</uui-input>
63+
</div>
64+
</uui-form-layout-item>
65+
<uui-form-layout-item>
66+
<div>
67+
<uui-input
68+
type="text"
69+
name="postal"
70+
placeholder=""
71+
required
72+
required-message="You must enter a postal number">
73+
</uui-input>
74+
</div>
75+
</uui-form-layout-item>
7776
78-
<uui-button type="reset" label="Reset" look="secondary"> Reset </uui-button>
79-
<uui-button type="submit" label="Submit" look="positive"> Submit </uui-button>
80-
</form>`;
77+
<uui-button type="reset" label="Reset" look="secondary"> Reset </uui-button>
78+
<uui-button type="submit" label="Submit" look="positive">
79+
Submit
80+
</uui-button>
81+
</form>
82+
</uui-form>`;

0 commit comments

Comments
 (0)