Минимальная проверка углового ввода

Я не могу подтвердить минимальное количество на входе материала, хотя я могу успешно подтвердить для required.

<input min = "0.01" matInput type = "number" placeholder = "Amount" style = "width: 49%;" [formControl] = "numberControl" name = "amount"
            [(ngModel)] = "amount" required>
  <mat-hint>
     <strong>Available cash: {{selectedMovementFrom?.portfolioValue | currency: 'GBP': 'symbol'}}</strong>
  </mat-hint>

  <mat-error *ngIf = "numberControl.hasError('min')">
    Amount cannot be negative.
  </mat-error>

  <mat-error *ngIf = "numberControl.hasError('required')">
    Please enter amount.
  </mat-error>

Я также пробовал проверить валидацию, сославшись на объект errors следующим образом:

<mat-error *ngIf = "numberControl.errors?.min">
   Amount must be greater than £0.00
</mat-error>

Однако это также не отображает ошибку, проверив документы, я все еще не в курсе.

Какие-нибудь указания или очевидные вещи, которые я пропустил?

🤔 А знаете ли вы, что...
Angular имеет активное сообщество разработчиков и обширную документацию.


1
1 505
2

Ответы:

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidatorFn, Validator, FormControl } from '@angular/forms';
@Directive({
  selector: '[appMinAmountValidator] [ngModel]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: MinAmoutValdiatorDirective, multi: true }
  ]
})
export class MinAmoutValdiatorDirective implements Validator{

  validator: ValidatorFn;
  constructor() {
    this.validator = validateminAmount();
  }
  validate(c: FormControl) {
    return this.validator(c);
  }

}



// validation function
function validateminAmount() : ValidatorFn {
  return (c: AbstractControl) => {

    let isValid = c.value >0;

    if (isValid) {
      return null;
    } else {
      return {
        isminAmountValid: {
          valid: false
        }
      };
    }

  }
}

Дайте это так:

 <input [min] = "0.01" matInput type = "number" placeholder = "Amount" 
 style = "width: 49%;" [formControl] = "numberControl" name = "amount"
        [(ngModel)] = "amount" required>