15

我有一个服务，它返回一个代表用户拥有的钱的值，我希望用户能够以等于或小于总金额的值进行交易。我试过像这样使用最大验证：

valid() {
        const form: FormGroup = this._fb.group({
          fond: ['', [Validators.required]],
          serie: ['', [Validators.required]],
          account: ['', [Validators.required, Validators.min(1)]],
          value: ['', [Validators.required, Validators.min(1)]],
          subAccount: ['', [Validators.required, Validators.min(1)]]
        });
        return form;
      }

但它不起作用，似乎max()必须从一开始就设置 in 的值，所以它只会假设 totalAmount 为未定义。

4

4 回答 4

41

更新您编辑的问题：

用这个：

value: ['', [
  Validators.required, 
  Validators.min(1), 
  (control: AbstractControl) => Validators.max(this.totalAmount)(control)
]]

您可以使用以下语法来实现：

(control: AbstractControl) => Validators.max(this.totalAmount)(control)

为什么？

  • 当您提供Validators.max(this.totalAmount)时，它会使用给定参数（的当前值this.totalAmount）创建一个验证函数，然后将其分配给表单控件。
  • 当您使用胖箭头函数时，分配给表单控件的是胖箭头定义本身。每次调用胖箭头函数时（在有效性检查期间），它都会重新评估Validators.max(this.totalAmount)并使用当前值创建新的验证函数this.totalAmount，从而使其动态化。
于 2017-08-30T05:51:43.250 回答
1

只是对前面的答案稍加补充，当你需要设置同一个表单的另一个formControl的一个formControl的validator的值时，你可以不使用validators初始化表单，然后注册它们，就像这样：

const form: FormGroup = this._fb.group({
      from: [''],
      to: ['']
});

form.controls.from.setValidators([
    Validators.required,
    (control: AbstractControl) => Validators.max(this.form.controls.to.value)(control)
]);

也是如此to。

于 2020-05-25T11:28:05.667 回答
0

一个强大而清晰的解决方案是使用setValidators()

当您使用setValidators()时，其他人可以更清楚地理解代码，并且当您要使用的动态值可能会根据用户对表单的输入而发生变化时，此解决方案也适用。

例如，在你的组件中有这样的东西：

  setInputValidation() {
    this.totalAmount = this.countryOfOrigin?.value === 'US' ? 40 : 30;
    this.value?.setValidators(Validators.max(this.totalAmount));
  }

您可以根据此动态值在模板中显示自定义错误：

 <mat-error *ngIf="value?.hasError('max')">
    Must be less than {{ totalAmount }}.
 </mat-error>

在我正在处理的情况下，我在表单中有一个下拉菜单，需要更改max另一个输入的验证。所以我使用了上面的代码，然后简单地将它添加到mat-select下拉列表中：

<mat-select formControlName="countryOfOrigin"
    (selectionChange)="setInputValidation()"
    name="country">
  <mat-option *ngFor="let country of countries" value="country">
    {{ country }}
  </mat-option>
</mat-select>

瞧，每次用户从下拉列表中进行选择时，输入的有效最大值都会更改，并且错误将根据新值显示。

注意：如果您的输入中有其他验证器，则必须在使用时添加它们setValidators()。

于 2021-04-01T20:27:55.503 回答
0

如果您使用的是响应式形式，请执行以下操作：

将此添加到您的 formBuilder.group

 offerPrice: [this.offer.offerPrice, [Validators.required, Validators.pattern('^\\d+(\\.\\d{1,2})?$'), Validators.pattern('^[1-9]+[0-9]*$'),
        (control: AbstractControl) => Validators.max(this.maxAmount)(control),
        (control: AbstractControl) => Validators.min(this.minAmount)(control)]],

在你的 html 上，使用如下：

<div class=" form-group">
              <mat-form-field>
                <input class="form-control" matInput formControlName="offerPrice" placeholder="Gift Amount" [ngClass]="{'is-invalid': submitted && f.offerPrice.errors}"  *ngIf="!useSlab"/>
                <div *ngIf="submitted && f.offerPrice.errors">
                  <mat-error *ngIf="f.offerPrice.errors.required">This is required</mat-error>
                  <mat-error *ngIf="f.offerPrice.errors.min">Minimum offer price should be {{minAmount}}</mat-error>                  
                  <mat-error *ngIf="f.offerPrice.errors.max">Maximum offer price should be {{maxAmount}}</mat-error>
                  <mat-error *ngIf="f.offerPrice.errors.pattern">Price should be greater than zero</mat-error>
                </div>
              </mat-form-field>
            </div>
于 2019-07-08T05:14:20.847 回答