是有效值 angular 7 表单域答案

【问题标题】：Is valid value angular 7 form field是有效值 angular 7 表单域
【发布时间】：2019-01-30 09:00:41
【问题描述】：

我创建了一个检查输入值是否有效的函数。

功能：

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的值时，功能不起作用，我不明白为什么。请您帮我确定问题并帮助找到解决方案，或者您是否有更适合这种情况的决定。给一些建议。谢谢！

【问题讨论】：

可能是因为您的价格是字符串而不是数字
你能创建堆栈闪电战吗？

标签： angular typescript angular-reactive-forms angular7

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 min 验证器来验证价格，而不是创建整个函数，使用 Validators.min(1000) 和 Validators.max(99999...) ，检查错误只需使用 <mat-error *ngIf="firstFormGroup.controls[price].valid">{{ price_error }}</mat-error>

【讨论】：

请创建 stackblitz