yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show validation messages on each level

Browse Source
This commit is contained in:
Mads Rasmussen
2023-01-23 21:49:54 +01:00
parent 3c262e8848
commit fb3ded6464
2 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
View File

@@ -21,10 +21,21 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
align-items: center;
margin-bottom: var(--uui-size-space-3);
gap: var(--uui-size-space-3);
border: 1px solid transparent;
}
:host(:not([pristine]):invalid),
/* polyfill support */
:host(:not([pristine])[internals-invalid]) {
border-color: var(--uui-color-danger);
}
#validation-message {
flex: 1;
}
#input {
flex: 1;
width: 100%;
}
`,
];
@@ -108,14 +119,18 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
render() {
return html`
${this.disabled || this.readonly ? nothing : html`<uui-icon name="umb:navigation"></uui-icon>`}
<uui-input
id="input"
value="${this.value}"
@input="${this.#onInput}"
@change="${this.#onChange}"
?disabled=${this.disabled}
?readonly=${this.readonly}
?required="${this.required}"></uui-input>
<uui-form-validation-message id="validation-message">
<uui-input
id="input"
label="Value"
value="${this.value}"
@input="${this.#onInput}"
@change="${this.#onChange}"
?disabled=${this.disabled}
?readonly=${this.readonly}
?required="${this.required}"
required-message="Value is missing"></uui-input>
</uui-form-validation-message>
${this.readonly
? nothing

19
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
View File

@@ -168,14 +168,17 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
this._items,
(item, index) => index,
(item, index) =>
html` <umb-input-multiple-text-string-item
value=${item.value}
@input=${(event: UmbInputEvent) => this.#onInput(event, index)}
@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
?disabled=${this.disabled}
?readonly=${this.readonly}
required
required-message="Item ${index + 1} is missing a value"></umb-input-multiple-text-string-item>`
html` <uui-form-validation-message>
<umb-input-multiple-text-string-item
value=${item.value}
name="test[]"
@input=${(event: UmbInputEvent) => this.#onInput(event, index)}
@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
?disabled=${this.disabled}
?readonly=${this.readonly}
required
required-message="Item ${index + 1} is missing a value"></umb-input-multiple-text-string-item>
</uui-form-validation-message>`
)}
`;
}