Как использовать валидаторы для диапазона номеров?

Question

Я хочу, чтобы переменная recipient находилась в диапазоне от 1 до 10. Я попробовал ее с Validators.min(1) и Validators.max(10), что не работает. Если пользователь вводит неверные данные, я хочу вернуть сообщение об ошибке для пользователя.

Как правильно использовать валидаторы?

TS:

  form: FormGroup;
      id: number;
      sender: number;
      recipient: number;
      amount: number;
      fee: number;

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<SendTXDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data) {

    this.sender = data.sender;

    this.form = this.fb.group({
      id: [this.id, Validators.required],
      sender: [this.sender, Validators.required],
      recipient: [this.recipient, [Validators.required, Validators.min(1), Validators.max(10)]],
      amount: [this.amount, Validators.required],
      fee: [this.fee, Validators.required],
    });
  }

  ngOnInit() {
  }

  /** This method is used to close the dialog and to send the information back to the component, which
   * called the dialog. **/
  save() {
      this.dialogRef.close(this.form.value);
  }

  /** This method is used to close the dialog. **/
  close() {
    this.dialogRef.close();
  }

HTML:

<div class="example-container">
<h1 mat-dialog-title>Transaktion senden</h1>
<div mat-dialog-content [formGroup]="form">

  <p>Sender</p>
  <div>
    <p matInput placeholder="Sender">{{ sender }}</p>
  </div>

  <mat-form-field hintLabel="Empfänger zwischen 1 und 10">
    <input matInput #input placeholder="Empfänger" formControlName="recipient"
    required min="1" max="10">
  </mat-form-field>

  <mat-form-field hintLabel="Betrag darf Ihr Guthaben nicht überschreiten">
    <input matInput #input placeholder="Betrag" formControlName="amount"
    required>
  </mat-form-field>

  <mat-form-field hintLabel="Je höher die Gebühr, desto wahrscheinlicher und schneller wird Ihre Transaktion gemint">
    <input matInput #input placeholder="Gebühr" formControlName="fee"
    required>
  </mat-form-field>

</div>
<div mat-dialog-actions>
  <button mat-raised-button (click)="close()">Zurück</button>
  <button mat-raised-button (click)="save()" cdkFocusInitial>Senden</button>
</div>
</div>

Answer 1

Просто добавьте type=number к вашему вводу

, если это шаблонно-управляемая форма для добавления шаблона в HTML;

  pattern="^[1-9]?"

Answer 2

Просто спросите форму, если она действительна.

save(): void {
    if(!this.form.valid) {
      this.displayMessage();
    } else {
      // actually save
    }
  }

Answer 3

используйте шаблоны регулярных выражений, если вы хотите ограничить число диапазоном от [1-9], если это только одно число: если так

Validators.pattern('^[1-9]?');

, это может работать

Answer 4

Для отображения сообщения необходимо зафиксировать ошибку и отобразить ее

В этом примере

Минимум 1 Максимум 10