Erstellen von benutzerdefinierten Formularsteuerungen mit ElementInternalen

Entwickler sind seit langem bestrebt, mehr Kontrolle über Formelemente zu haben. Obwohl dies etwas übertrieben ist, ist das Erstellen oder Anpassung von Formkomponenten seit Jahren der heilige Gral der Front-End-Webentwicklung.

Benutzerdefinierte Elemente (z.<my-custom-element></my-custom-element> ) Eines der leistungsstärksten Funktionen wurde seit der Google Chrome 77 -Version leise veröffentlicht und schrittweise auf andere Browser angewendet. Der ElementInternals Standard ist ein leistungsstarker Satz von Funktionen mit einem sehr zurückhaltenden Namen. Zu den Funktionen gehören teilnehmende Formulare und APIs, die Barrierefreiheitskontrollen umgeben.

In diesem Artikel wird untersucht, wie benutzerdefinierte Formularsteuerung erstellt, die Beschränkungsüberprüfung integriert, die Grundlagen der internen Barrierefreiheit eingeführt und angezeigt werden, wie diese Funktionen kombiniert werden, um hoch tragbare Makroform -Steuerelemente zu erstellen.

Beginnen wir zunächst ein einfaches benutzerdefiniertes Element, das unserem Designsystem entspricht. Unsere Elemente speichern alle Stile in Shadow DOM und gewährleisten eine grundlegende Zugänglichkeit. Wir werden die exzellente Litelement -Bibliothek vom Google Polymer -Team als Codebeispiel verwenden, und obwohl Sie sie unbedingt nicht benötigen, bietet sie eine gute Abstraktion für das Schreiben von benutzerdefinierten Elementen.

In diesem Beispiel erstellen wir a<rad-input></rad-input> Es hat einige grundlegende Designs. Wir haben auch eine zweite Eingabe in das Formular hinzugefügt, bei dem es sich um eine normale HTML -Eingabe handelt, und den Standardwert hinzugefügt (so können Sie einfach Senden -Senden drücken und sehen, wie es funktioniert).

Wenn wir auf die Schaltfläche Senden klicken, passieren mehrere Dinge. Zunächst wird die preventDefault -Methode des Commit -Ereignisses in diesem Fall aufgerufen, um sicherzustellen, dass unsere Seite nicht neu lädt. Danach erstellen wir ein FormData -Objekt, mit dem wir auf Informationen über das Formular zugreifen können, mit dem wir eine JSON -Zeichenfolge erstellen und an anhängen<output></output> Element. Beachten Sie jedoch, dass der zu unserer Ausgabe hinzugefügte eindeutige Wert von einem Element "Basic" stammt.

Dies liegt daran, dass unsere Elemente noch nicht wissen, wie sie mit dem Formular interagieren sollen<rad-input></rad-input> , um es zu helfen, seinen Namen zu verdienen. Zunächst müssen wir die attachInternals -Methode unserer Methode im Konstruktor des Elements aufrufen und die ElementInternals Polyfill in unsere Seite importieren, um die Spezifikation noch nicht zu verwenden.

Die attachInternals -Methode gibt eine neue interne Element -Instanz zurück, die einige neue APIs enthält, die wir in unseren Methoden verwenden können. Damit unsere Elemente diese APIs ausnutzen können, müssen wir einen statischen formAssociated Getter hinzufügen, der true zurückgibt.

 Class Radinput erweitert Litelement {
  static get formassociated () {
    zurückkehren;
  }

  constructor () {
    super();
    this.internals = this.attachinternals ();
  }
}

Werfen wir einen Blick auf einige APIs im internals -Attribut eines Elements:

• setFormValue(value: string|FormData|File, state?: any): void - Diese Methode legt den Wert eines Elements in seinem übergeordneten Formular fest, wenn die übergeordnete Form vorhanden ist. Wenn der Wert null ist, beteiligt sich das Element nicht am Formulareinreichungsprozess.
• form - Wenn vorhanden, ist es ein Verweis auf die übergeordnete Form des Elements.
• setValidity(flags: Partial<validitystate> , message?: string, anchor?: HTMLElement): void</validitystate> , Nachricht ? setValidity setValidity(flags: Partial<validitystate> , message?: string, anchor?: HTMLElement): void</validitystate> Wenn das Formular ungültig ist, muss eine Verifizierungsnachricht vorhanden sein.
• willValidate - wahr, wenn das Element bewertet wird, wenn das Formular eingereicht wird.
• validity - Ein Validitätsobjekt, das der API und der Semantik entspricht, die an HTMLInputElement.prototype.validity beigefügt ist.
• validationMessage - Wenn Sie die Kontrolle zur Ungültigkeit der Steuerung setValidity , ist dies die Nachricht, die den Fehler beschreibt.
• checkValidity - Gibt true zurück, wenn das Element gültig ist, ansonsten false zurückgibt und ein ungültiges Ereignis für das Element auslöst.
• reportValidity - Wie checkValidity , wenn das Ereignis nicht storniert wird, wird dem Benutzer ein Problem gemeldet.
• labels - Verwenden Sie label[for] Attribut, um die Liste der Elemente für dieses Element zu markieren.
• Einige andere Steuerelemente zum Festlegen von Aria -Informationen zu Elementen.

Legen Sie den Wert eines benutzerdefinierten Elements fest

Lassen Sie uns unsere ändern<rad-input></rad-input> Einige dieser APIs auszunutzen:

Hier ändern wir die _onInput -Methode des Elements, um einen Aufruf auf this.internals.setFormValue zu enthalten. Dies gibt das Formular an, dass unser Element einen Wert im Formular unter Verwendung seines angegebenen Namens registrieren möchte (als Eigenschaft in unserem HTML festgelegt). Wir haben auch eine firstUpdated -Methode hinzugefügt (ähnlich wie bei connectedCallback , wenn Sie Litelement nicht verwenden), das den Wert des Elements auf eine leere Zeichenfolge festlegt, wenn das Element das Rendering abgeschlossen ist. Dies soll sicherstellen, dass unsere Elemente immer den Wert des Formulars haben (obwohl nicht erforderlich, können Sie die Elemente aus dem Formular ausschließen, indem Sie einen Nullwert übergeben).

Wenn wir nun den Eingang Mehrwert verleihen und das Formular einreichen, werden wir in unserer sein<output></output> Im Element wird ein radInput angezeigt. Wir können auch sehen, dass unser Element der radInput -Eigenschaft von HTMLFormElement hinzugefügt wurde. Eine Sache, die Sie jedoch vielleicht bemerkt haben, ist, dass es trotz unseres Elements immer noch die Einreichung von Formularen ermöglicht. Als nächstes fügen wir unser Element eine Validierung hinzu.

Fügen Sie die Beschränkungsüberprüfung hinzu

Um die Validierung des Feldes festzulegen, müssen wir das Element ein wenig ändern, um die setValidity -Methode auf dem Objekt im Element zu verwenden. Diese Methode akzeptiert drei Parameter (wenn das Element ungültig ist, ist nur der zweite Parameter erforderlich und der dritte Parameter ist immer optional). Der erste Parameter ist Teil ValidityState -Objekts. Wenn ein Flag auf TRUE eingestellt ist, wird die Steuerung als ungültig markiert. Wenn einer der integrierten Gültigkeitsschlüsseln Ihren Anforderungen nicht entspricht, können Sie den gemeinsamen customError -Schlüssel verwenden. Wenn die Steuerung gültig ist, werden wir schließlich ein Objektliteral ({}) übergeben, um die Gültigkeit der Steuerung zurückzusetzen.

Der zweite Parameter ist die Gültigkeitsmeldung der Steuerung. Dieser Parameter ist erforderlich, wenn die Steuerung ungültig ist und dieser Parameter nicht zulässig ist, wenn das Steuerelement gültig ist. Der dritte Parameter ist ein optionales Überprüfungsziel, das den Schwerpunkt des Benutzers steuert, wenn die Formulareingabe ungültig ist oder wenn reportValidity aufgerufen wird.

Wir werden unsere geben<rad-input></rad-input> Stellen Sie eine neue Methode ein, um diese Logik zu bewältigen:

 _ManageRequired () {
  const {value} = this;
  const input = this.shadowroot.querySelector ('Eingabe');
  if (value === '' && this.Required) {
    this.internals.setvalidity ({{
      Valuemissing: Richtig
    }, 'Dieses Feld ist erforderlich', Eingabe);
  } anders {
    this.internals.setValidity ({});
  }
}

Diese Funktion erhält den Wert und die Eingabe der Steuerung. Wenn der Wert gleich einer leeren Zeichenfolge ist und das Element nach Bedarf markiert ist, rufen wir internals.setValidity an. Jetzt müssen wir nur diese Methode in unseren firstUpdated und _onInput -Methoden nennen, und wir können unseren Elementen eine grundlegende Validierung hinzufügen.

In Abwesenheit von unserem<rad-input></rad-input> Klicken Sie vor dem Eingeben des Wertes auf die Schaltfläche Senden und die Fehlermeldung werden nun in Browsern angezeigt, die die ElementInternals -Spezifikation unterstützen. Leider unterstützt Polyfill immer noch nicht das Anzeigen von Überprüfungsfehlern , da es keinen zuverlässigen Weg gibt, das integrierte Verifizierungspopup in nicht unterstützten Browsern auszulösen.

Wir haben unser Beispiel auch einige grundlegende Informationen zur Zugänglichkeit hinzugefügt, indem wir unser internals -Objekt verwenden. Wir fügen dem Element eine zusätzliche Eigenschaft _required , die als Proxy this.required fungiert required

 Erfordernst () {
  return this._Required;
}

Setzen Sie erforderlich (isRequired) {
  this._required = isRequired;
  this.internals.arioRequired = isRequired;
}

Indem wir die required Eigenschaft an internals.ariaRequired weitergeben, erinnern wir den Bildschirmleser daran, dass unser Element derzeit einen Wert benötigt. In der Polyfill erfolgt dies durch Hinzufügen des aria-required Attributs; In unterstützten Browsern wird das Attribut jedoch nicht dem Element hinzugefügt, da das Attribut dem Element inhärent ist.

Erstellen Sie ein Mikroformular

Nachdem wir nun eine gültige Eingabe haben, die zu unserem Designsystem passt, möchten wir unsere Elemente möglicherweise in Mustern kombinieren, die über mehrere Anwendungen hinweg wiederverwendet werden können. Eines der auffälligsten Merkmale von ElementInternals ist, dass die setFormValue Methode nicht nur Zeichenfolge und Dateidaten, sondern auch FormData-Objekte annehmen kann. Nehmen wir also an, wir möchten ein gemeinsames Adressformular erstellen, das in mehreren Organisationen verwendet werden kann. Dies können wir dies einfach mit unseren neu erstellten Elementen tun.

In diesem Beispiel erstellen wir eine Form innerhalb der Schattenwurzel des Elements, in der wir vier kombinieren<rad-input></rad-input> Element zum Erstellen eines Adressformulars. Anstatt diesmal mit einer Zeichenfolge setFormValue aufzurufen, bestehen wir dafür, den gesamten Wert des Formulars zu übergeben. Infolgedessen übergibt unser Element den Wert jedes einzelnen Elements in seiner untergeordneten Form an die externe Form.

Das Hinzufügen von Einschränkungsvalidierung zu diesem Formular wäre ein ziemlich einfacher Prozess, ebenso wie zusätzliche Styling-, Verhaltens- und Inhalts -Slots. Durch die Verwendung dieser neueren APIs können Entwickler letztendlich viel Potenzial für benutzerdefinierte Elemente freischalten und uns letztendlich die Freiheit haben, die Benutzererfahrung zu kontrollieren.

Das obige ist der detaillierte Inhalt vonErstellen von benutzerdefinierten Formularsteuerungen mit ElementInternalen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!