@svadmin/ui 0.88.0 → 0.91.0

package/dist/components/FieldRenderer.svelte

@@ -24,6 +24,8 @@
   import DateTimeInput from './DateTimeInput.svelte';
   import DateRangeInput, { type DateRangeInputValue } from './DateRangeInput.svelte';
   import FileUpload from './FileUpload.svelte';
+  import type { UploadCancelHandler, UploadHandler } from './file-upload-types.js';
+  import FileUploadField from './FileUploadField.svelte';
   import ColorPicker from './ColorPicker.svelte';
   import Rate from './Rate.svelte';
   import TagsInput from './TagsInput.svelte';
@@ -36,23 +38,51 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
   import { numericInputValue } from '../numeric-input.js';
+  import type { NumericInputLocale } from './numeric-format.js';
 
   type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const i18n = useTranslation();
 
-  let { field, value, onchange, disabled, invalid = false, errorId, children } = $props<{
+  let {
+    field, value, onchange, disabled, invalid = false, errorId, id, children, nativeSubmit = true,
+    upload, cancelUpload, onUploadStateChange, fileReferenceMode = false, fileScopeKey,
+  } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
     disabled?: boolean;
     invalid?: boolean;
-    errorId?: string;
+    errorId?: string | undefined;
+    id?: string;
     children?: Snippet;
+    /** 嵌套数组的可序列化值由外层 JSON 提交；原始文件保留原生通道。 */
+    nativeSubmit?: boolean;
+    /** 开启异步上传后，字段值只保存可序列化引用，不再接收 File。 */
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
+    onUploadStateChange?: (state: { busy: boolean; unresolved: boolean }) => void;
+    /** AutoForm 的 JSON 文件模式；独立 FieldRenderer 默认保留原生 multipart。 */
+    fileReferenceMode?: boolean;
+    /** 记录/上传作用域或 reset 变化时只重挂载文件字段。 */
+    fileScopeKey?: string | number | object;
   }>();
 
+  const instanceId = $props.id();
+  const controlId = $derived(id ?? (children ? field.key : `${instanceId}-control`));
+  const labelId = $derived(children ? `label-${controlId}` : `${instanceId}-label`);
+  const labelTarget = $derived(!children && field.type === 'daterange' ? `${controlId}-start` : controlId);
+  const descriptionId = $derived(`${instanceId}-description`);
+  const describedBy = $derived([field.description ? descriptionId : undefined, errorId].filter(Boolean).join(' ') || undefined);
+  const nativeFieldName = $derived(nativeSubmit ? field.key : undefined);
+  const nativeArrayName = $derived(nativeSubmit ? `${field.key}[]` : undefined);
+
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
   const numVal = $derived(numericInputValue(value));
+  // FieldDefinition.locale is intentionally a runtime string. Pass it through so
+  // NumericInput can render an explicit unsupported-locale state instead of
+  // silently switching the field back to the default number path.
+  const numericLocale = $derived(field.locale as NumericInputLocale | undefined);
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
@@ -90,18 +120,21 @@
     }
   }
 
-  // Images management
+  // Images management：禁用态保留回显，但所有入口都不能改值。
   function addImage() {
+    if (disabled) return;
     onchange([...imagesVal, '']);
   }
 
   function updateImage(index: number, url: string) {
+    if (disabled) return;
     const next = [...imagesVal];
     next[index] = url;
     onchange(next);
   }
 
   function removeImage(index: number) {
+    if (disabled) return;
     onchange(imagesVal.filter((_: string, i: number) => i !== index));
   }
 </script>
@@ -111,162 +144,182 @@
   data-svadmin-field
   data-svadmin-field-key={field.key}
 >
-  <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
+  <Label {...definedOptions({ for: !children && (['array', 'transfer'].includes(field.type) || field.type === 'richtext' && getRichTextEditor()) ? undefined : labelTarget })} id={labelId} data-svadmin-field-label>
     {field.label}
     {#if field.required}
       <span class="svadmin-u-811148b13d1e">*</span>
     {/if}
   </Label>
+  {#if field.description}
+    <p id={descriptionId} data-svadmin-field-description class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{field.description}</p>
+  {/if}
 
   {#if children}
     {@render children()}
 
   {:else if field.type === 'array'}
-    <input type="hidden" name={field.key} value={JSON.stringify(Array.isArray(value) ? value : [])} />
-    <ArrayField {field} {value} {onchange} />
+    {#if nativeSubmit}
+      <input type="hidden" name={field.key} value={JSON.stringify(Array.isArray(value) ? value : [])} {disabled} />
+    {/if}
+    <ArrayField
+      {field}
+      {value}
+      {onchange}
+      {...definedOptions({ disabled })}
+      labelledby={labelId}
+      {...definedOptions({ describedby: describedBy })}
+      invalid={invalid}
+      nativeSubmit={false}
+      {fileReferenceMode}
+      {...definedOptions({ upload, cancelUpload, onUploadStateChange, fileScopeKey })}
+    />
 
   {:else if field.type === 'text' || field.type === 'image'}
     <Input
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
       placeholder={i18n.t('field.enterValue', { label: field.label })}
     />
 
   {:else if field.type === 'email'}
     <Input
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       type="email"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
       placeholder="name@example.com"
     />
 
   {:else if field.type === 'url'}
     <Input
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       type="url"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
       placeholder="https://"
     />
 
   {:else if field.type === 'phone'}
     <Input
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       type="tel"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
       placeholder="+1 (555) 000-0000"
     />
 
   {:else if field.type === 'color'}
     <ColorPicker
-      id={field.key}
-      name={field.key}
+      id={controlId}
       value={strVal}
       onchange={onchange}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
       ariaLabel={field.label}
       {disabled}
+      {...definedOptions({ name: nativeFieldName, describedby: describedBy })}
     />
 
   {:else if field.type === 'number'}
     <NumberInput
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       value={numVal}
       min={field.min}
       max={field.max}
       step={field.step}
       precision={field.precision}
+      locale={numericLocale}
       onchange={onchange}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
+      describedby={describedBy}
       {disabled}
     />
 
   {:else if field.type === 'currency'}
     <MoneyInput
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       value={numVal}
       currency={field.currency ?? 'USD'}
       min={field.min}
       max={field.max}
       step={field.step}
       precision={field.precision ?? 2}
+      locale={numericLocale}
       onchange={onchange}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
+      describedby={describedBy}
       {disabled}
     />
 
   {:else if field.type === 'percent'}
     <PercentInput
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       value={numVal}
       scale={field.scale ?? '100'}
       min={field.min}
       max={field.max}
       step={field.step}
       precision={field.precision ?? 1}
+      locale={numericLocale}
       onchange={onchange}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
+      describedby={describedBy}
       {disabled}
     />
 
   {:else if field.type === 'richtext'}
     {@const EditorComp = getRichTextEditor()}
     {#if EditorComp}
-      <input type="hidden" name={field.key} value={strVal} />
+      <input type="hidden" name={nativeFieldName} value={strVal} {disabled} />
       <EditorComp
-        id={field.key}
+        id={controlId}
         value={strVal}
         placeholder={i18n.t('field.enterValue', { label: field.label })}
         preset="full"
-        onchange={(html: string) => onchange(html)}
+        onchange={(html: string) => { if (!disabled) onchange(html); }}
+        aria-labelledby={labelId}
+        aria-required={field.required || undefined}
         aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
+        aria-describedby={describedBy}
         {disabled}
       />
     {:else}
       <Textarea
-        id={field.key}
-        name={field.key}
+        id={controlId}
+        name={nativeFieldName}
         value={strVal}
         oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
         required={field.required}
         aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
+        aria-describedby={describedBy}
         {disabled}
         rows={10}
         placeholder={i18n.t('field.enterValue', { label: field.label })}
@@ -276,13 +329,13 @@
 
   {:else if field.type === 'textarea'}
     <Textarea
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
       rows={4}
       placeholder={i18n.t('field.enterValue', { label: field.label })}
@@ -290,7 +343,18 @@
     />
 
   {:else if field.type === 'tree-select' || field.type === 'treeselect'}
+    {#if field.multiple}
+      {#each multiVal as selectedValue, _i (selectedValue)}
+        <input type="hidden" name={nativeArrayName} value={String(selectedValue)} {disabled} />
+      {/each}
+    {:else}
+      <input type="hidden" name={nativeFieldName} value={value == null ? '' : String(value)} {disabled} />
+    {/if}
     <TreeSelect
+      id={controlId}
+      ariaLabel={field.label}
+      {...definedOptions({ describedby: describedBy })}
+      invalid={invalid}
       options={(field.treeOptions ?? field.options ?? []) as TreeSelectOption[]}
       {...definedOptions({ "value": value as string | number | (string | number)[] | undefined })}
       multiple={field.multiple}
@@ -300,7 +364,12 @@
     />
 
   {:else if field.type === 'cascader'}
+    <input type="hidden" name={nativeFieldName} value={JSON.stringify(Array.isArray(value) ? value : [])} {disabled} />
     <Cascader
+      id={controlId}
+      ariaLabel={field.label}
+      {...definedOptions({ describedby: describedBy })}
+      invalid={invalid}
       options={(field.cascaderOptions ?? field.options ?? []) as CascaderOption[]}
       value={value as (string | number)[]}
       separator={field.separator}
@@ -311,7 +380,14 @@
     />
 
   {:else if field.type === 'transfer'}
+    {#each multiVal as selectedValue, _i (selectedValue)}
+      <input type="hidden" name={nativeArrayName} value={String(selectedValue)} {disabled} />
+    {/each}
     <Transfer
+      id={controlId}
+      labelledby={labelId}
+      {...definedOptions({ describedby: describedBy })}
+      invalid={invalid}
       dataSource={(field.transferData ?? field.options?.map((o: { label: string; value: string | number }) => ({ key: o.value, title: o.label })) ?? []) as TransferItem[]}
       targetKeys={(value as (string | number)[]) ?? []}
       disabled={disabled}
@@ -321,13 +397,13 @@
   {:else if field.type === 'relation' && field.resource}
     {#if field.multiple}
       {#each multiVal as selectedValue, _i (selectedValue)}
-        <input type="hidden" name={field.key} value={String(selectedValue)} />
+        <input type="hidden" name={nativeFieldName} value={String(selectedValue)} {disabled} />
       {/each}
     {:else}
-      <input type="hidden" name={field.key} value={value == null ? '' : String(value)} />
+      <input type="hidden" name={nativeFieldName} value={value == null ? '' : String(value)} {disabled} />
     {/if}
     <ComboboxField
-      id={field.key}
+      id={controlId}
       resource={field.resource}
       value={field.multiple ? multiVal : value as string | number | null}
       onchange={(v) => onchange(v)}
@@ -336,22 +412,22 @@
       multiple={field.multiple}
       placeholder={i18n.t('field.selectPlaceholder')}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
     />
 
   {:else if field.type === 'select'}
-    <input type="hidden" name={field.key} value={value == null ? '' : String(value)} {disabled} />
+    <input type="hidden" name={nativeFieldName} value={value == null ? '' : String(value)} {disabled} />
     {#if (field.options?.length ?? 0) > 8}
       <select
-        id={field.key}
+        id={controlId}
         data-slot="select"
         class="svadmin-u-60fbb7713999 svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-9c24ab70af61 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-5f533b3a7de7 svadmin-u-b29d8adbad2e"
         value={selectToken}
         onchange={changeSelect}
         required={field.required}
         aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
+        aria-describedby={describedBy}
         disabled={disabled}
       >
         <option value="">{i18n.t('field.selectPlaceholder')}</option>
@@ -361,12 +437,12 @@
       </select>
     {:else}
       <Select
-        id={field.key}
+        id={controlId}
         value={selectToken}
         onchange={changeSelect}
         required={field.required}
         aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
+        aria-describedby={describedBy}
         {disabled}
       >
         <option value="">{i18n.t('field.selectPlaceholder')}</option>
@@ -378,23 +454,23 @@
 
   {:else if field.type === 'multiselect'}
     {#each multiVal as selectedValue, selectedIndex (`${selectedValue}-${selectedIndex}`)}
-      <input type="hidden" name={`${field.key}[]`} value={String(selectedValue)} {disabled} />
+      <input type="hidden" name={nativeArrayName} value={String(selectedValue)} {disabled} />
     {/each}
     <div 
       class="svadmin-u-6f7e013d6499 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-eb6e8b881acd svadmin-u-558f64349245 svadmin-u-92bf82f493b1"
       role="group" 
-      aria-labelledby="label-{field.key}"
-      aria-describedby={errorId}
+      aria-labelledby={labelId}
+      aria-describedby={describedBy}
       data-invalid={invalid || undefined}
     >
       {#each field.options ?? [] as opt, _i (_i)}
         <label class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb svadmin-u-34516836730d svadmin-u-39f703dbe296 svadmin-u-07389a777c1f svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-ceb69a6b0e5f">
           <Checkbox
-            id={`${field.key}-option-${_i}`}
+            id={`${controlId}-option-${_i}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
             aria-invalid={invalid || undefined}
-            aria-describedby={errorId}
+            aria-describedby={describedBy}
             disabled={disabled || opt.disabled}
           />
           {opt.label}
@@ -417,14 +493,14 @@
     {/if}
 
   {:else if field.type === 'boolean'}
-    <input type="hidden" name={field.key} value={String(boolVal)} />
+    <input type="hidden" name={nativeFieldName} value={String(boolVal)} {disabled} />
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-6b7d6e21ccbd">
       <Switch
-        id={field.key}
+        id={controlId}
         checked={boolVal}
         onCheckedChange={(v) => onchange(v)}
         aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
+        aria-describedby={describedBy}
         disabled={disabled}
       />
       <span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{boolVal ? i18n.t('common.yes') : i18n.t('common.no')}</span>
@@ -432,21 +508,20 @@
 
   {:else if field.type === 'tags'}
     <TagsInput
-      name={`${field.key}[]`}
       value={tagsVal}
       onchange={onchange}
       placeholder={i18n.t('field.tagsPlaceholder')}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
       ariaLabel={field.label}
       {disabled}
+      {...definedOptions({ name: nativeArrayName, describedby: describedBy })}
     />
 
   {:else if field.type === 'date' || field.type === 'time' || field.type === 'datetime'}
     <DateTimeInput
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       mode={field.type}
       min={field.dateInput?.min}
       max={field.dateInput?.max}
@@ -459,13 +534,13 @@
       onchange={(next) => onchange(next)}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
+      describedby={describedBy}
       {disabled}
     />
 
   {:else if field.type === 'daterange'}
     <DateRangeInput
-      startId={`${field.key}-start`}
+      startId={`${controlId}-start`}
       mode={field.dateInput?.rangeMode ?? 'date'}
       valueMode={field.dateInput?.valueMode}
       timeZone={field.dateInput?.timeZone}
@@ -475,78 +550,116 @@
       step={field.dateInput?.step}
       disabledDate={field.dateInput?.disabledDate}
       presets={field.dateInput?.presets}
-      endId={`${field.key}-end`}
+      endId={`${controlId}-end`}
       startAriaLabel={`${field.label} ${i18n.t('common.startDate')}`}
       endAriaLabel={`${field.label} ${i18n.t('common.endDate')}`}
-      startName={`${field.key}.start`}
-      endName={`${field.key}.end`}
       value={value as DateRangeInputValue | null}
       onchange={(next) => onchange(next)}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
       {disabled}
+      {...definedOptions({
+        startName: nativeSubmit ? `${field.key}.start` : undefined,
+        endName: nativeSubmit ? `${field.key}.end` : undefined,
+        describedby: describedBy,
+      })}
     />
 
   {:else if field.type === 'rate' || field.type === 'rating'}
     <Rate
-      name={field.key}
+      name={nativeFieldName}
       value={numVal ?? 0}
       onchange={onchange}
       required={field.required}
       invalid={invalid}
-      describedby={errorId}
       ariaLabel={field.label}
       {disabled}
+      {...definedOptions({ describedby: describedBy })}
     />
 
   {:else if field.type === 'file'}
-    <FileUpload
-      id={field.key}
-      name={field.key}
-      multiple={field.multiple}
-      required={field.required && !value}
-      disabled={disabled}
-      accept={field.accept}
-      maxSize={field.maxSize}
-      onChange={(items) => onchange(field.multiple ? items.map(item => item.file) : items[0]?.file ?? null)}
-    />
+    {#if fileReferenceMode || upload}
+      <!-- AutoForm 显式 JSON 文件模式：只写入可序列化引用。 -->
+      {#key fileScopeKey}
+        <FileUploadField
+          id={controlId}
+          {field}
+          {value}
+          {onchange}
+          {invalid}
+          {...definedOptions({ describedby: describedBy })}
+          {...definedOptions({ disabled, upload, cancelUpload, onUploadStateChange })}
+        />
+      {/key}
+    {:else}
+      <!-- 独立 FieldRenderer 保留原生 multipart 字段名与 File 值。 -->
+      <FileUpload
+        id={controlId}
+        name={field.key}
+        multiple={field.multiple}
+        required={field.required && !value}
+        disabled={disabled}
+        ariaLabel={field.label}
+        invalid={invalid}
+        {...definedOptions({ describedby: describedBy })}
+        accept={field.accept}
+        maxSize={field.maxSize}
+        onChange={(items) => onchange(field.multiple ? items.map(item => item.file) : items[0]?.file ?? null)}
+      />
+    {/if}
 
   {:else if field.type === 'images'}
     {#each imagesVal as url, imageIndex (imageIndex)}
-      <input type="hidden" name={`${field.key}[]`} value={url} />
+      <input type="hidden" name={nativeArrayName} value={url} {disabled} />
     {/each}
     <div class="svadmin-u-6f7e013d6499">
       {#each imagesVal as url, i (i)}
         <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
           <Input
-            id={i === 0 ? field.key : undefined}
+            id={i === 0 ? controlId : undefined}
             type="text"
             value={url}
             oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
             placeholder="https://example.com/image.jpg"
             class="svadmin-u-36e579c0b41c"
             aria-invalid={invalid || undefined}
-            aria-describedby={errorId}
+            aria-describedby={describedBy}
             {disabled}
           />
           {#if url}
             <div class="svadmin-u-665f07fe73cc svadmin-u-012fbd121f37"><MediaThumbnail src={url} alt="preview" size="full" fit="cover" showOverlay={false} /></div>
           {/if}
-          <TooltipButton tooltip={i18n.t('common.removeImage')} variant="ghost" size="icon" class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-012fbd121f37" onclick={() => removeImage(i)}>
+          <TooltipButton
+            tooltip={i18n.t('common.removeImage')}
+            variant="ghost"
+            size="icon"
+            class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-012fbd121f37"
+            aria-describedby={describedBy}
+            aria-invalid={invalid || undefined}
+            {disabled}
+            onclick={() => removeImage(i)}
+          >
             <X class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
           </TooltipButton>
         </div>
       {/each}
-      <Button variant="outline" size="sm" type="button" onclick={addImage}>
+      <Button
+        variant="outline"
+        size="sm"
+        type="button"
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        {disabled}
+        onclick={addImage}
+      >
         <Plus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-618162408e7a" /> {i18n.t('field.addImage')}
       </Button>
     </div>
 
   {:else if field.type === 'json'}
     <Textarea
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       value={jsonEditText}
       onfocus={() => { jsonEditing = true; }}
       onblur={() => {
@@ -564,20 +677,20 @@
       }}
       {disabled}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       rows={6}
       class="svadmin-u-5bd7b080992c svadmin-u-0e65706bcccd svadmin-u-359090c2d529"
     />
 
   {:else}
     <Input
-      id={field.key}
-      name={field.key}
+      id={controlId}
+      name={nativeFieldName}
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      aria-describedby={describedBy}
       {disabled}
     />
   {/if}