有效值 angular 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(1000) 和 Validators.max(99999...) ，检查错误只需使用 <mat-error *ngIf="firstFormGroup.controls[price].valid">{{ price_error }}</mat-error>

Answer 2

您需要使用 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)]],
  });

有效值 angular 7 表单域

Is valid value angular 7 form field

typescript

angular

angular-reactive-forms

angular7