Mam pojedynczy przypadek, w którym muszę ręcznie na kontrolce ustawić error w sytuacji, w której zmieniona jest wartość na dropdownie. Kontrolka ta zbindowana jest z komunikatem błędu (app-validation-message
). W praktyce wygląda to tak:
Kod html z podpiętą kontrolką błędu:
<app-drop-down *ngIf="isCustomRelationshipChosen" placeHolder="Select"
(changed)="onRelationshipChanged($event)">
</app-drop-down>
<app-validation-message
[control]="form.controls['relationship']" [error]="'maxValueReached'">
Number of maximum customers for membership reached.
</app-validation-message>
Event ustawiający błąd na kontrolce relationship
public onRelationshipChanged(relationshipCode?: string): void {
this.isMaxNumberReached
? this.form.controls['relationship'].setErrors({ maxValueReached: true })
: this.form.controls['relationship'].setErrors(null);
}
Finalnie kawałek kontrolki obsługującej błąd:
export class ValidationMessageComponent {
@Input()
public control: AbstractControl;
@Input()
public error: string;
public get show() {
return this.control.invalid && this.control.touched && this.hasAnyErrorToShow(); // w tym miejscu invalid jest zawsze na false dla tej kontrolki
}
[...]
Nie miałem nigdy problemu z przekazywaniem forma lub ich kontrolek do inputu, gdzie następnie były trackowane i komunikaty wyświetlały się poprawnie. W tym wypadku jest jednak inaczej, jako że error ustawiam ręcznie. Wygląda to tak, jakby po ustawieniu błędu nie był on na bieżąco aktualizowany i do app-validation-message
przekazywana byłaby poprzednia wartość (mimo że wcześniej ustawiony jest error, to po wejściu do controls.errors
albo przy weryfikacji control.invalid
w ValidationMessageComponent
wyświetlane są nieprawidłowe wartości). Miałby ktoś pomysł, jak to rozwiązać?