Ausführliche Erläuterung der Verwendung von ControlValueAccessor durch Angular zur Implementierung benutzerdefinierter Formularsteuerelemente

In diesem Artikel erfahren Sie, AngularWie Sie mit ControlValueAccessor benutzerdefinierte Formularsteuerelemente implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Angular: [ControlValueAccessor] Benutzerdefinierte Formularsteuerung

---

In der tatsächlichen Entwicklung stoßen wir normalerweise auf eine Vielzahl benutzerdefinierter Funktionen, und einige Komponenten interagieren mit den Formularen von Angular. Zu diesem Zeitpunkt übergeben wir normalerweise ein FormGroup-Objekt von außen und schreiben Sie dann die entsprechende Logik in die Komponente, um die Angular-Form zu betreiben. Wenn wir nur ein Element im Formular anpassen, ist es offensichtlich unangemessen, das gesamte Formularobjekt zu übergeben, und die Komponente erscheint außerdem aufgebläht.

<form [formGroup]="simpleForm">                                <br/>  <other-component [form]="simpleForm"></other-component>        <br/></form><br/>

Können wir diese benutzerdefinierten Komponenten wie native Formulare verwenden? Derzeit kann die Open-Source-Formularkomponente ng-zorro-antd das Attribut formControlName genau wie native Formulare verwenden. Dieser Komponententyp wird als benutzerdefinierte Formularkomponente bezeichnet. [Verwandte Empfehlungen: „Angular Tutorial“]

So implementieren Sie benutzerdefinierte Formularsteuerelemente

In Angular können Sie ControlValueAccessor verwenden, um Komponenten mit dem äußeren umschlossenen Formular zu verknüpfen.

ControlValueAccessor ist eine Schnittstelle zur Handhabung von:

• Schreiben von Werten aus dem Formularmodell in die Ansicht/das DOM
• Benachrichtigen anderer Formularanweisungen und Steuerelemente, wenn sich die Ansicht/das DOM ändert

ControlValueAccessor

ControlValueAccessor-Schnittstelle Vier Methoden sind definiert:

writeValue(obj: any): void<br/><br/>registerOnChange(fn: any): void<br/><br/>registerOnTouched(fn: any): void<br/><br/>setDisabledState(isDisabled: boolean)?: void<br/>

writeValue(obj: any): Methode zum Schreiben neuer Werte aus dem Formularmodell in die Ansicht oder DOM-Eigenschaften (falls erforderlich), es werden Daten von außen geschrieben in das interne Datenmodell. Datenflussrichtung: Formularmodell -> writeValue(obj：any)：将表单模型中的新值写入视图或DOM属性（如果需要）的方法，它将来自外部的数据写入到内部的数据模型。数据流向： form model -> component。

registerOnChange(fn：any)：一种注册处理程序的方法，当视图中的某些内容发生更改时应调用该处理程序。它具有一个告诉其他表单指令和表单控件以更新其值的函数。通常在 registerOnChange 中需要保存该事件触发函数，在数据改变的时候，可以通过调用事件触发函数通知外部数据变了，同时可以将修改后的数据作为参数传递出去。数据流向： component -> form model。

registerOnTouched(fn: any)：注册 onTouched 事件，基本同 registerOnChange ，只是该函数用于通知表单组件已经处于 touched 状态，改变绑定的 FormControl 的内部状态。状态变更： component -> form model。

setDisabledState(isDisabled: boolean)：当调用 FormControl 变更状态的 API 时得表单状态变为 Disabled 时调用 setDisabledState() 方法，以通知自定义表单组件当前表单的读写状态。状态变更： form model -> component。

如何使用 ControlValueAccessor

搭建控件框架

@Component({<br/>  selector: &#39;app-test-control-value-accessor&#39;,<br/>  templateUrl: &#39;./test-control-value-accessor.component.html&#39;,<br/>  providers: [{<br/>    provide: NG_VALUE_ACCESSOR,<br/>    useExisting: forwardRef(() => TestControlValueAccessorComponent),<br/>    multi: true<br/>  }]<br/>})<br/>export class TestControlValueAccessorComponent implements ControlValueAccessor {<br/><br/>  _counterValue = 0;<br/> <br/>  private onChange = (_: any) => {};<br/><br/>  constructor() { }<br/><br/>  get counterValue() {<br/>    return this._counterValue;<br/>  }<br/><br/>  set counterValue(value) {<br/>    this._counterValue = value;<br/>    // 触发 onChange，component 内部的值同步到 form model<br/>    this.onChange(this._counterValue);<br/>  }<br/><br/>  increment() {<br/>    this.counterValue++;<br/>  }<br/><br/>  decrement() {<br/>    this.counterValue--;<br/>  }<br/><br/>  // form model 的值同步到 component 内部<br/>  writeValue(obj: any): void {<br/>    if (obj !== undefined) {<br/>      this.counterValue = obj;<br/>    }<br/>  }<br/><br/>  registerOnChange(fn: any): void {<br/>    this.onChange = fn;<br/>  }<br/><br/>  registerOnTouched(fn: any): void { }<br/><br/>  setDisabledState?(isDisabled: boolean): void { }<br/><br/>}<br/>

注册 ControlValueAccessor

为了获得 ControlValueAccessor 用于表单控件，Angular 内部将注入在 NG_VALUE_ACCESSOR 令牌上注册的所有值，这是将控件本身注册到 DI 框架成为一个可以让表单访问其值的控件。因此，我们需要做的就是NG_VALUE_ACCESSOR 使用我们自己的值访问器实例（这是我们的组件）扩展 multi-provider 。所以设置 multi: true，是声明这个 token 对应的类很多，分散在各处。

这里我们必须使用 useExisting，因为TestControlValueAccessorComponent 可能在使用它的组件中被其创建为指令依赖项。这就得用到 forwardRef

registerOnChange(fn: any): Eine Methode zum Registrieren eines Handlers, der aufgerufen werden soll, wenn sich etwas in der Ansicht ändert. Es verfügt über eine Funktion, die andere Formulardirektiven und Formularsteuerelemente anweist, ihre Werte zu aktualisieren. Normalerweise muss die ereignisauslösende Funktion in registerOnChange gespeichert werden. Wenn sich die Daten ändern, können die externen Daten durch Aufrufen der ereignisauslösenden Funktion benachrichtigt und die geänderten Daten als Parameter übergeben werden. Datenflussrichtung: Komponente ->

registerOnTouched(fn: any): Registrieren Sie das onTouched-Ereignis, im Grunde dasselbe wie registerOnChange, außer dass diese Funktion verwendet wird, um die Formularkomponente darüber zu informieren, dass sie sich im berührten Zustand befindet, und um den internen Zustand zu ändern das gebundene FormControl. Statusänderung: Komponente ->

setDisabledState(isDisabled: boolean): Beim Aufrufen der API von FormControl zum Ändern des Status wird die Methode setDisabledState() aufgerufen, wenn sich der Formularstatus in „Deaktiviert“ ändert, um die benutzerdefinierte Formularkomponente über den Lesevorgang zu informieren und Schreibstatus des aktuellen Formulars. Statusänderung: Formularmodell ->

So verwenden Sie ControlValueAccessor

zum Erstellen eines Kontrollframeworks

• @Component({<br/>  ...<br/>  providers: [<br/>    { <br/>      provide: NG_VALUE_ACCESSOR,<br/>      useExisting: forwardRef(() => TestControlValueAccessorComponent ),<br/>      multi: true<br/>    }<br/>  ]<br/>})<br/>export class TestControlValueAccessorComponent implements ControlValueAccessor {<br/>  ...<br/>}<br/>

Registrieren Sie ControlValueAccessor

Um ControlValueAccessor für Formularsteuerelemente zu erhalten, wird Angular es intern injizieren NG_VALUE_ACCESSOR-Token registrierten Werte, das das Steuerelement selbst im <code>DI-Framework registriert, um ein Steuerelement zu werden, auf dessen Werte über Formulare zugegriffen werden kann. Alles, was wir tun müssen, ist, Multi-Provider mit unserer eigenen Value-Accessor-Instanz (die unsere Komponente ist) zu erweitern. Das Festlegen von multi: true bedeutet also, zu deklarieren, dass es viele Klassen gibt, die diesem token entsprechen und überall verstreut sind.

Hier müssen wir useExisting verwenden, da TestControlValueAccessorComponent als Direktivenabhängigkeit in der Komponente erstellt werden kann, die es verwendet. Dies erfordert die Verwendung von forwardRef, wodurch wir auf ein undefiniertes Objekt verweisen können.

<div class="panel panel-primary"><br/>  <div class="panel-heading">自定义控件</div><br/>  <div class="panel-body"><br/>    <button (click)="increment()">+</button><br/>    {{counterValue}}<br/>    <button (click)="decrement()">-</button><br/>  </div><br/></div><br/>

Steuerschnittstelle

• test-control-value-accessor.component.html

<div class="constainer"><br/>  <form #form="ngForm"><br/>    <app-test-control-value-accessor name="message" [(ngModel)]="message"></app-test-control-value-accessor><br/>    <button type="button" (click)="submit(form.value)">Submit</button><br/>  </form><br/>  <pre class="brush:php;toolbar:false">{{ message }}