时间戳

首页 > 解决方案 > 如何根据变量的当前值验证输入（自定义验证器函数）？

angular - 如何根据变量的当前值验证输入（自定义验证器函数）？

问题描述

我的表单上有一个输入字段，需要验证该数字不大于 1,000,000 且不小于帐户余额。我能够将最大值设置为 1,000,000，但无法成功地将余额与输入进行比较。我希望这会导致输入字段周围出现红色轮廓，类似于超过 1,000,000 的情况。这是我的代码：

HTML 模板

<mat-form-field appearance = outline class="amount">
  <mat-label>Amount</mat-label>
  <input matInput
    type='number'
    required 
    formControlName="amount">
</mat-form-field>

零件

export class StartComponent implements OnInit {
  currentAccount: ICustomerAccount;
  amountMax = 1000000;
  startForm = new FormGroup({
    amount: new FormControl('', Validators.max(this.amountMax)),
  });
}

标签： angularvalidationinputmaxcustomvalidator

解决方案

您需要一个 CustomValidator 函数，如此处所述：https ://angular.io/guide/form-validation

@Component({
  selector: 'app-validator-test',
  templateUrl: './validator-test.component.html'
})
export class ValidatorTestComponent implements OnInit {
  public startForm: FormGroup;
  public amountMax = 5000;
  public currentAccount: any = {value: 10};

  constructor(private formBuilder: FormBuilder) {}

  public ngOnInit(): void {
    this.startForm =  this.formBuilder.group({
      amount: ['', [Validators.max(this.amountMax), this.customValidatorFn()]]
    });
  }

  private customValidatorFn(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const valid: boolean = this.currentAccount.value <= control.value;
      return valid ? null : {amountMinError: true};
    };
  }
}

模板：

<form [formGroup]="startForm" *ngIf="startForm">
  <input formControlName="amount" type="number"/>
  <div>valid: {{startForm.get('amount').valid}}</div>
</form>

不要忘记将 FormsModule 和 ReactiveFormsModule 添加到模块导入中：imports: [BrowserModule, FormsModule, ReactiveFormsModule],

推荐阅读