угловая - как использовать функцию setcustomvalidity

Question

Я пытаюсь использовать метод html setcustomvalidity, чтобы установить мою проверку бизнеса, но форма не может заблокировать пользовательскую достоверность.Как использовать эту функцию под углом?

форма:

export class AutoComponent {
  autoFiled: any;
  
  @ViewChild('autoForm') autoForm;
  @ViewChild('autoInput', { read: ElementRef}) autoInput: ElementRef;
  
  check() {
    if (autoField != '123') {
      this.autoInput.nativeElement.setCustomValidity('Not Equals 123');
      this.autoForm.submitted = true;
      return false;
    }
    
    return true;
  }
}

<form novalidate #autoForm="ngForm"
  [class.invalid]="!autoForm.submitted">
  <input #autoInput type="text" name="auto" [(ngModel)]="autoField"/>
</form>

Answer 1

Чтобы добавить валидацию в управляемой шаблоном форме, вам нужно создать пользовательскую директиву

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl } from '@angular/forms';
@Directive({
  selector: '[appCustomVaidator]',
  providers:[{
    provide: NG_VALIDATORS,
    useValue: equalCheck,
    multi: true
  }],
  exportAs:'appCustomVaidator'
})
export class CustomVaidatorDirective {
  constructor() { }
}
function equalCheck(c:AbstractControl){
  if(!c.value) return null;
  return  c.value != 123 ? { notEqual: true} : null;   
}

Ref :: https://angular.io/guide/form-validation

Пример: https://stackblitz.com/edit/angular-template-drive-form-customvalidator