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

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

Функция:

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, функция не работает и я не могу понять почему. Не могли бы вы помочь мне определить проблему и помочь получить решение, или если у вас есть более подходящие решения для этой ситуации. Дайте несколько советов. Благодарю вас!


typescript angular angular7 angular-reactive-forms
person bek    schedule 30.01.2019    source источник
comment
возможно, потому что ваша цена является строкой, а не числом   -  person CornelC    schedule 30.01.2019
comment
вы можете создать stackblitz?   -  person TheParam    schedule 30.01.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

компонент.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)]],
  });
person wentjun    schedule 30.01.2019

arrow_upward
0
arrow_downward

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

person N.Tasikj    schedule 30.01.2019
comment
создайте стекблиц, пожалуйста - person N.Tasikj; 30.01.2019