it-swarm.com.de

Angular4 - Kein Wert-Accessor für die Formularsteuerung

Ich habe ein benutzerdefiniertes Element:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

Wenn ich versuche, den formControlName hinzuzufügen, wird folgende Fehlermeldung angezeigt:

FEHLER Fehler: Kein Wert-Accessor für Formularsteuerung mit Name: 'surveyType'

Ich habe versucht, ngDefaultControl ohne Erfolg hinzuzufügen. Es scheint, als gäbe es keine Eingabe/Auswahl ... und ich weiß nicht, was ich tun soll.

Ich möchte meinen Klick an dieses Formular-Steuerelement binden, damit, wenn jemand auf die gesamte Karte klickt, der meinen "Typ" in das Formular-Steuerelement drückt. Ist es möglich?

109
jbtd

Sie können formControlName nur für Anweisungen verwenden, die ControlValueAccessor implementieren.

Implementieren Sie die Schnittstelle

Um zu tun, was Sie wollen, müssen Sie eine Komponente erstellen, die ControlValueAccessor implementiert, was bedeutet , dass die folgenden drei Funktionen implementiert werden :

  • writeValue (sagt Angular, wie der Wert vom Modell in die Ansicht geschrieben wird)
  • registerOnChange (registriert eine Handlerfunktion, die aufgerufen wird, wenn sich die Ansicht ändert)
  • registerOnTouched (registriert einen Handler, der aufgerufen werden soll, wenn die Komponente ein Berührungsereignis empfängt. Dies ist hilfreich, um festzustellen, ob die Komponente fokussiert wurde.).

Registrieren Sie einen Anbieter

Dann müssen Sie Angular mitteilen, dass diese Anweisung ein ControlValueAccessor ist (die Schnittstelle schneidet sie nicht ab, da sie beim Kompilieren von TypeScript in JavaScript aus dem Code entfernt wird). Sie tun dies, indem Sie einen Anbieter registrieren .

Der Anbieter sollte NG_VALUE_ACCESSOR und einen vorhandenen Wert verwenden bereitstellen. Sie benötigen auch ein forwardRef hier. Beachten Sie, dass _NG_VALUE_ACCESSOR_ ein Multi-Provider sein sollte.

Wenn Ihre benutzerdefinierte Direktive beispielsweise MyControlComponent heißt, sollten Sie in das an _@Component_ decorator übergebene Objekt etwas in den folgenden Zeilen einfügen:

_providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyControlComponent),
  }
]
_

Verwendungszweck

Ihre Komponente ist einsatzbereit. Mit vorlagengesteuerte Formulare funktioniert die Bindung von ngModel nun ordnungsgemäß.

Mit reaktive Formulare können Sie jetzt formControlName ordnungsgemäß verwenden, und das Formularsteuerelement verhält sich wie erwartet.

Ressourcen

191

Ich denke, Sie sollten formControlName="surveyType" auf einem input und nicht auf einem div verwenden.

48
Vega