Действительное значение углового поля формы 7

Question

Я создал функцию, которая проверяет допустимость введенного значения.

Функция:

error_message = '';

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
  this.firstFormGroup = this._formBuilder.group({
    title: [
      '',
      [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(24),
      ],
    ],
    person: ['', Validators.required],
    money_type: ['', Validators.required],
    price: ['', Validators.required],
  });
  this.secondFormGroup = this._formBuilder.group({
    secondCtrl: ['', Validators.required],
  });
}

isValidPrice() {
  if (!this.firstFormGroup.get('price').value) {
    this.price_error = 'You must set a price';
    return false;
  } else if (this.firstFormGroup.get('price').value < 1000) {
    this.price_error = 'Minimum price is 1000';
    return false;
  }

  return true;
}

И HTML-код:

        <mat-form-field
          hintLabel="Set a price"
          class="information-form-field"
        >
          <input
            matInput
            placeholder="Price"
            formControlName="price"
            type="number"
            required
            max="9999999999"
            min="1000"
            #title
          />
          <mat-error *ngIf="!isValidPrice()">{{ price_error }}</mat-error>
        </mat-form-field>

Но есть проблема, вводю ли я какое-либо значение, функция работает, и отображается ошибка, но когда я ввожу значение меньше 1000, функция не работает, и я не могу понять, почему.Не могли бы вы, пожалуйста, помочь мне определить проблему и помочь найти решение, или если у вас есть более подходящие решения для этой ситуации.Дайте несколько советов.Спасибо!

Answer 1

вам нужно указать минимальный валидатор для вашего компонента, используя Validators.min().Кроме того, может быть лучше передать начальное значение null элементам управления формы.Вы можете ссылаться на код ниже

component.ts

this.firstFormGroup = this._formBuilder.group({
    title: [
      null,
      [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(24),
      ],
    ],
    person: [null, Validators.required],
    money_type: [null, Validators.required],
    price: [null, [Validators.required, Validators.min(1000)]],
  });

Answer 2

Вы можете использовать минимальный валидатор для проверки цены, а не для создания всей функции, используйте Validators.min(1000) и Validators.max(99999...), для проверки на ошибку просто используйте <mat-error *ngIf="firstFormGroup.controls[price].valid">{{ price_error }}</mat-error>