Как реализовать валидацию в CVA?

Question

Я создаю форму, одним из полей этой формы является компонент cantrolValueAcessor. Это поле представляет собой просто число и пару кнопок. После нажатия на левую кнопку номер уменьшается, после нажатия на правую кнопку номер увеличивается.

Я хочу использовать проверку для поля cantrolValueAcessor. Сообщение об ошибке должно отображаться, когда число меньше «0».

Вот моя попытка .

CVA-код:

      import { Component, forwardRef } from '@angular/core';
import {
  ControlValueAccessor,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
  Validator,
} from '@angular/forms';

@Component({
  selector: 'hello',
  template: `
    <button (click)="minus()">minus</button>
    <button (click)="plus()">plus</button>
    {{ value }}
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => HelloComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => HelloComponent),
      multi: true,
    },
  ],
})
export class HelloComponent implements ControlValueAccessor, Validator {
  value: number;

  validate() {
    return this.value > 0 ? null : { positive: true };
  }

  onChange: any = () => {};
  onTouch: any = () => {};

  registerOnChange(fn: any) {
    this.onChange = fn;
  }
  registerOnTouched(fn: any) {
    this.onTouch = fn;
  }

  writeValue(input: number) {
    this.value = input;
  }

  minus() {
    this.value -= 1;
  }

  plus() {
    this.value += 1;
  }
}

родительский код:

      this.form = this.fb.group({
      name: [null, [Validators.required]],
      email: [null, [Validators.required, Validators.email]],
      buttons: [0],
    });

Answer 1

Поскольку вы уже используете элемент управления формы, вы можете легко добавить его minValueвалидатор, затем проверьте наличие этой ошибки в объекте управления формой.

https://angular.io/api/forms/Validators#min