Пользовательский валидатор в управляемой шаблоном форме всегда возвращает ноль

Question

Я пытаюсь добавить пользовательский валидатор в форме, управляемой шаблоном. Я использую Angular 7. Каким бы ни было значение, я всегда получаю ноль.

HTML:

<div class="form-group">
  <label style="font-weight:bold">Seats Available</label> <input type="number" required class="form-control" [(ngModel)]="seats" name="carseat" #carseat="ngModel" validateseat />
  <div *ngIf="carseat.dirty && carseat.errors?.validseat">Required.</div>
</div>

Код:

import { Validator, FormControl } from "@angular/forms";
import { Directive } from "@angular/core";

@Directive({
  selector: "[validateseat]"
})
export class Seatvalidatordirective implements Validator {
  validate(control: FormControl): { [key: string]: any } | null {
    console.log("dd", control.value);
    return control.value < 0 || control.value > 8 ? { validseat: true } : null;
  }
}

Answer 1

Вы на самом деле не предоставляете свой пользовательский валидатор, вам необходимо добавить:

providers: [
  { provide: NG_VALIDATORS, useExisting: Seatvalidatordirective, multi: true }
]

к вашей директиве:

@Directive({
  selector: "[validateseat]",
  providers: [
    { provide: NG_VALIDATORS, useExisting: Seatvalidatordirective, multi: true }
  ]
})
export class Seatvalidatordirective implements Validator {
  validate(control: FormControl): { [key: string]: any } | null {
    console.log("dd", control.value);
    return control.value < 0 || control.value > 8 ? { validseat: true } : null;
  }
}

Вот вам StackBlitz