Angular4 - Brak akcesoriów do kontroli formularza

Question

Mam mały problem z moim formularzem.

zrobiłem element niestandardowy:

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

próbuję dodać formControlName ale kanciasty nie chcę nic wiedzieć i po prostu mówiąc:

ERROR Error: No value accessor for form control with name: 'surveyType' 

Próbowałem dodać ngDefaultControl bez powodzenia. Wygląda na to, że nie ma wejścia/wybierz ... ale nie wiem, co robić.

Chciałbym przywiązać moje kliknięcie do tego formularzaControl, aby po kliknięciu na całą kartę, która wepchnęła mój "typ" do formControl. Czy to możliwe?

Answer 1

formControlName można użyć jedynie na dyrektyw, które wdrażają ControlValueAccessor.

Wdrożenie interfejsu

Tak, aby robić to, co chcesz, musisz utworzyć komponent, który implementuje ControlValueAccessor, co oznacza realizację następujących trzech funkcji:

• writeValue (mówi Kątowe, jak wpisać wartość z modelu do widoku)
• registerOnChange (rejestruje funkcję modułu obsługi wywoływaną podczas zmiany widoku)
• registerOnTouched (rejestruje program obsługi, który zostanie wywołany, gdy komponent otrzyma zdarzenie dotykowe, przydatne do sprawdzenia, czy komponent został skupiony).

Rejestracja dostawcy

Następnie, trzeba powiedzieć, że ta dyrektywa kątowa jest ControlValueAccessor (interfejs nie będzie go wyciąć, ponieważ jest usuwana z kodu gdy maszynopis jest kompilowany do kodu JavaScript). Zrobisz to przez rejestrując dostawcę.

Dostawca powinien dostarczyć NG_VALUE_ACCESSOR i use an existing value. Będziesz także potrzebować tutaj forwardRef. Zauważ, że NG_VALUE_ACCESSOR powinno być multi provider.

Na przykład, jeśli dyrektywa zwyczaj nazywa MyControlComponent, należy dodać coś wzdłuż następujące linie wewnątrz obiektu przekazany do @Component dekoratora:

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

Usage

komponent jest gotowy do użycia . Z template-driven forms, ngModel powiązanie będzie teraz działało poprawnie.

Dzięki reactive forms można teraz poprawnie używać formControlName, a formant formularza będzie działał zgodnie z oczekiwaniami.

Resources

• Custom Form Controls in Angular by Thoughtram
• Angular Custom Form Controls with Reactive Forms and NgMode by Cory Rylan

Answer 2

myślę, że należy użyć formControlName="surveyType" na input a nie na div