新的FormData(SomeForm)不调用JavaScript中的自定义Getter

Question

我有一个自定义下拉组件。在此组件中，我设置了一个自定义 getter 和 setter，如下所示：

Object.defineProperty(this.DropDownInputTarget, 'value', {
    get: function() {
        return this.dataset.inputValue ?? nativeInputGetter.call(this);
    },
    set: function(value: string){
        nativeInputSetter.call(this, value);
    }
});

在代码中或通过检查器控制台使用它时，我得到了预期的结果。但是当我通过

new FormData(SomeForm)

获取表单数据时，该值始终为空。我需要做些什么才能使其按预期工作吗？ 检查员的示例：

code: document.querySelector('#Item1_ShippingInfo_StoreOptions_OtherLocationId').value
response: "BRXSL" 

如何获取表单数据：

const formData = new FormData(shippingForm);

其他输入中的所有其他值均已正确检索。

至于我为什么使用自定义 getter，这是为了自定义下拉组件。所选项目的实际值与显示值不同。我将实际值保留在数据属性中。这就是自定义 getter 检索的内容。

这是控制台中值的样子的图片。请注意，我在 FormData 对象中获取 null，但在获取 input.value 时获取值。 如果我不使用 Ajax 提交表单，情况如下：

我确实有一个解决方法，但不太理想。它要求我在创建

formData

对象后手动设置缺少的值。

const formData = new FormData(shippingForm);
formData.set('Item1.ShippingInfo.StoreOptions.OtherLocationId', 
shippingForm.querySelector<HTMLInputElement>('#Item1_ShippingInfo_StoreOptions_OtherLocationId').value);

Answer 1

虽然使用

internals.setFormValue()

可以工作，但这要求输入是自定义输入。这样你就可以打电话给

HTMLElement.attachInternals

。

之后，您需要确保自定义元素类在类级别定义了此变量：

static formAssociated = true;

，以便通过创建新的 FormData 来选取它。

如果您的输入不是自定义元素，则此方法将不起作用，因为

HTMLElement.attachInternals

不适用于内置类型。

我选择不走这条路，因为：

1. Typescript 对自定义元素没有最好的支持。
2. 制作自定义元素需要对现有代码进行大量更改。

解决方案： 添加隐藏的输入元素。这是我将在 C# 中绑定到的输入元素，并在选择项目时更新值。

<div class="select-container">
  <input type="text" class="form-control" placeholder="Other Location" data-custom-validation="dropdownValidation" data-dropdown-action="search" data-dropdown-input/>
  <input type="hidden" asp-for="@Model.Location" />
  <!-- Additional HTML for the select componant -->
<div>

在上面的示例中，隐藏输入位于可见输入之后。可见输入仍将显示“选定”的内容，而隐藏输入将更新为我想要提交的当前值。 由于可见输入没有名称或值，因此在创建表单数据时不会捕获它。