多个自定义值访问器匹配具有未指定名称属性的表单控件 - TypeScript

在 TypeScript 中，我们可以定义自定义值访问器来控制我们自己定义的属性的读取和设置。但是，当我们需要匹配具有未指定名称属性的表单控件时，该怎么办呢？在本篇文章中，我们将介绍如何使用多个自定义值访问器来匹配具有未指定名称属性的表单控件。

什么是自定义值访问器？

自定义值访问器是 TypeScript 中一个强大的特性，它可以帮助我们控制我们自己定义的属性的读取和设置。举个例子，我们可以定义一个名为“fullName”的属性，然后在该属性的读取和设置时添加一些自定义逻辑，如验证输入的格式或对输入的数据进行加密等。

以下是一个例子：

class Person {
  private firstName: string;
  private lastName: string;

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name: string) {
    const [firstName, lastName] = name.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const person = new Person();
person.fullName = 'John Doe';
console.log(person.firstName); // 'John'
console.log(person.lastName); // 'Doe'
console.log(person.fullName); // 'John Doe'

在上面的例子中，我们创建了一个名为“Person”的类，它有一个名为“fullName”的自定义属性，它可以被读取和设置。在读取该属性时，我们将返回“firstName”和“lastName”的合并字符串。在设置该属性时，我们将通过拆分传入的字符串来设置“firstName”和“lastName”。

如何匹配具有未指定名称属性的表单控件？

当我们需要匹配具有未指定名称属性的表单控件时，我们可以使用多个自定义值访问器来做到这一点。例如，我们可以创建一个名为“FormControl”的类，它具有一个名为“value”的自定义属性，它可以被读取和设置。在设置该属性时，我们将通过表单控件的类型来确定要设置的属性名称。

以下是一个示例：

class FormControl {
  private input: HTMLInputElement | HTMLTextAreaElement;
  
  constructor(input: HTMLInputElement | HTMLTextAreaElement) {
    this.input = input;
  }
  
  get value(): string | boolean | number {
    const { type, checked } = this.input;
    if (type === 'checkbox') {
      return checked;
    }
    if (type === 'radio') {
      const form = this.input.form as HTMLFormElement;
      const radios = Array.from(form.elements[type])
        .filter((el: any) => el.name === this.input.name);
      return radios.find((radio: any) => radio.checked).value;
    }
    return this.input.value;
  }
  
  set value(value: string | boolean | number) {
    const { type } = this.input;
    if (type === 'checkbox') {
      (this.input as HTMLInputElement).checked = Boolean(value);
    } else if (type === 'radio') {
      const form = this.input.form as HTMLFormElement;
      const radios = Array.from(form.elements[type])
        .filter((el: any) => el.name === this.input.name);
      radios.forEach((radio: any) => {
        radio.checked = radio.value === value;
      });
    } else {
      this.input.value = value as string;
    }
  }
}

const input = document.querySelector('input[type="text"]') as HTMLInputElement;
const control = new FormControl(input);
control.value = 'Hello, world!';
console.log(control.value); // 'Hello, world!'

在上面的例子中，我们定义了一个名为“FormControl”的类，该类具有一个名为“value”的自定义属性。在设置该属性时，我们将使用表单控件的类型来确定要设置的属性名称，例如输入框的“value”属性、复选框的“checked”属性或单选框的“checked”属性。

使用该类的示例与原生表单控件的使用类似，只需传入一个 HTMLInputElement 或 HTMLTextAreaElement 实例，并使用访问器来获取或设置其值即可。

总结

在 TypeScript 中，我们可以使用自定义值访问器来控制我们自己定义的属性的读取和设置。当需要匹配具有未指定名称属性的表单控件时，我们可以使用多个自定义值访问器来做到这一点。在这篇文章中，我们学习了如何创建一个名为“FormControl”的类，该类具有一个名为“value”的自定义属性，该属性可以读取和设置表单控件的值。