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)]],
  });

有效值为角度7格式字段

2 个答案: