Angular custom validation not working for template-driven form

Question

I am trying to create a custom validator that compares control to a specific number for template-driven form but for some reason, I can't get it to work. here's what I did so far

template:

<div class="td-c">
          <div class="form-group">
           <label class="quantity-label">
            <input  class="form-control" name="number"
               [(ngModel)]="product.item.quantity"
               [ngModelOptions]="{standalone: true}"
               (ngModelChange)="updateProductQuantity(i, product)"
               #quantity="ngModel"
               required
               quantityValidator>
           </label>
           <span *ngIf="quantity.hasError('quantityValidator')">error</span>
          </div>
         </div>

directive.ts file:

import { Directive, Input } from '@angular/core';
import { Validator, NG_VALIDATORS, FormControl, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
@Directive({
  selector: '[quantityValidator]',
  providers: [{
   provide: NG_VALIDATORS,
   useClass: QuantityValidatorDirective,
   multi: true
 }]
})
export class QuantityValidatorDirective implements Validator{
 
 @Input() quantity;
 
  constructor(){
   console.log('hello')
 }
  validate(c: FormControl) {
   return this.quantityValidator(5)(c)
 }
  quantityValidator(itemQuantity: number): ValidatorFn{
   return (control: FormControl): ValidationErrors | null => {
     if(control.value === itemQuantity){
       return null
    }else{
      return {
       isGreater: {valid: false}
     }
    }
     
  }
 }
}

any help will be greatly appreciated

Answer 1

It can be easily done by reactive forms. I am not sure why are you using the template-driven forms here. I don't think quantity.hasError('quantityValidator') would have a value. There won't be a hasError() method on quantity.

You can simply do it in the updateProductQuantity(i, product). Declare a boolean variable as hasError in the ts file and check the quantity change in the updateProductQuantity(). If the validation fails change the value of hasError to true.

In template use like this,

 <span *ngIf="hasError">error</span>