Explication détaillée de l'utilisation de ControlValueAccessor par Angular pour implémenter des contrôles de formulaire personnalisés

Cet article vous présentera Angular comment utiliser ControlValueAccessor pour implémenter des contrôles de formulaire personnalisés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Angular : [ControlValueAccessor] Contrôle de formulaire personnalisé

---

Dans le développement réel, nous rencontrons généralement diverses Pour diverses fonctions personnalisées , certains composants interagiront avec les formulaires angulaires. À ce stade, nous transmettons généralement un objet FormGroup de l'extérieur, puis écrivons la logique correspondante à l'intérieur du composant pour faire fonctionner la forme angulaire. Si nous ne personnalisons qu'un seul élément du formulaire, il est évidemment inapproprié de transmettre l'intégralité de l'objet de formulaire, et le composant apparaîtra également gonflé.

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

Alors, pouvons-nous utiliser ces composants personnalisés comme des formulaires natifs ? Actuellement, le composant de formulaire open source ng-zorro-antd peut utiliser l'attribut formControlName tout comme les formulaires natifs. Ce type de composant est appelé composant de formulaire personnalisé. [Recommandations associées : "Tutoriel angulaire"]

Comment implémenter des contrôles de formulaire personnalisés

Dans Angular, utilisez ControlValueAccessor peut associer des composants à la forme enveloppée externe.

ControlValueAccessor est une interface permettant de gérer :

• Écrire des valeurs du modèle de formulaire vers la vue/DOM
• Notifier les autres lorsque la vue/DOM change de formulaire instructions et contrôles

ControlValueAccessor

L'interface ControlValueAccessor définit quatre méthodes :

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) : Convertir le modèle de formulaire Méthode pour écrire un nouveau valeurs à la vue ou aux propriétés DOM (si nécessaire), qui écrit les données de l'extérieur dans le modèle de données interne. Sens du flux de données : modèle de formulaire -> composant.

registerOnChange(fn：any) : Une méthode pour enregistrer un gestionnaire qui doit être appelé lorsque quelque chose dans la vue change. Il a une fonction qui indique aux autres directives de formulaire et contrôles de formulaire de mettre à jour leurs valeurs. Habituellement, la fonction de déclenchement d'événement doit être enregistrée dans registerOnChange. Lorsque les données changent, les données externes peuvent être informées du changement en appelant la fonction de déclenchement d'événement, et les données modifiées peuvent être transmises en tant que paramètre. Direction du flux de données : composant -> modèle de formulaire.

registerOnTouched(fn: any) : événement Register onTouched, fondamentalement identique à registerOnChange, sauf que cette fonction est utilisée pour notifier le composant de formulaire qu'il est dans l'état touché et modifier l'état interne du FormControl lié. Changement de statut : composant -> modèle de formulaire.

setDisabledState(isDisabled: boolean) : Lorsque l'état du formulaire passe à Désactivé lorsque l'API de FormControl est appelée, la méthode setDisabledState() est appelée pour notifier le composant de formulaire personnalisé de l'état de lecture et d'écriture du formulaire actuel. Changement de statut : modèle de formulaire ->

Comment utiliser ControlValueAccessor

Créer un cadre de contrôle

@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/>

Enregistrer ControlValueAccessor

Afin que le ControlValueAccessor soit utilisé dans le contrôle de formulaire, Angular injectera en interne toutes les valeurs enregistrées sur le jeton NG_VALUE_ACCESSOR, qui enregistre le contrôle lui-même dans le DI framework et devient celui accessible par le formulaire Le contrôle dont la valeur. Donc, tout ce que nous devons faire est NG_VALUE_ACCESSOR d'étendre le multi-fournisseur avec notre propre instance d'accesseur de valeur (qui est notre composant). Donc définir multi: true signifie déclarer qu'il existe de nombreuses classes correspondant à ce token, dispersées un peu partout.

Ici, nous devons utiliser useExisting car TestControlValueAccessorComponent peut être créé en tant que dépendance de directive dans le composant qui l'utilise. Cela nécessite l'utilisation de forwardRef, qui permet de référencer un objet non défini.

@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/>

Interface de contrôle

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

<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/>

dans le formulaire Utilisé dans

• app.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 }}