如果值大于200，则显示错误

Question

我想在<mat-error>中显示这是什么错误。

primaryFormGroup = this.fb.group({
  hourlyRate: ['', [Validators.requiredTrue, Validators.max(200)]],
});

<mat-form-field [formGroup]="this.primaryFormGroup">
  <label><input formControlName="hourlyRate" autocomplete="off" name="hourlyRate" id="wanted-hourly-rate" matInput placeholder="e.g., 50" type="number" appNumbersOnly></label>
  <mat-error *ngIf="hourlyRate.errors.maxLength">Typed number is greater than 200</mat-error>
</mat-form-field>

如您所见，我已经用hourlyRate.errors.maxLength进行了尝试，但收到错误消息

  

无法读取null的属性“ maxLength”

如果键入的数字大于200，如何显示错误？

Answer 1

您的代码有两个问题：

1. hourlyRate是primaryFormGroup属性中控件的名称。它不是组件的属性/模板变量，因此无法直接引用。
2. max和maxLength是两个不同的验证。 max验证数字值，而maxLength验证输入字符的数量。

请参阅以下stackblitz供参考：https://stackblitz.com/edit/angular-8p5hwn?file=src%2Fapp%2Fhello.component.ts