Html 如何使用数字范围的验证器？

我希望

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();
  }

形式：FormGroup；
id：编号；
发送者：号码；
收件人：号码；
金额：数字；
费用：电话号码；
建造师(
私人fb:FormBuilder，
私有dialogRef:MatDialogRef，
@注入（MAT_对话框_数据）数据{
this.sender=data.sender；
this.form=this.fb.group({
id:[this.id，Validators.required]，
发件人：[this.sender，Validators.required]，
收件人：[this.recipient，[Validators.required，Validators.min（1），Validators.max（10）]，
金额：[this.amount，Validators.required]，
费用：[此。费用，验证器。必填]，
});
}
恩戈尼尼特（）{
}
/**此方法用于关闭对话框并将信息发送回组件，该组件
*调用对话框**/
保存（）{
this.dialogRef.close（this.form.value）；
}
/**此方法用于关闭对话框**/
关闭（）{
this.dialogRef.close（）；
}

HTML:

森登交易
寄件人

{{Sender}
祖鲁克
森登

要显示消息，需要捕获错误并显示它

在这个例子中

最少1

---

要显示消息，最多10个，需要捕获错误并显示它

在这个例子中

最少1

---

最多10个只需在输入中添加

type=number

如果是模板驱动的表单，则向HTML添加模式

  pattern="^[1-9]?"

---

只需在输入中添加

type=number

如果是模板驱动的表单，则向HTML添加模式

  pattern="^[1-9]?"

---

如果要将数字限制在[1-9]范围内，请使用正则表达式模式 是否只有一个号码：如果是

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

---

如果您想将数字限制在[1-9]范围内，则可以使用正则表达式模式 是否只有一个号码：如果是

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

---

这可能有效

只要询问表格是否有效即可

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

---

只需询问表格是否有效

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

---

您不使用任何

mat error

，也不在按钮上使用条件。您是否阅读了反应表单和物料表单字段的文档？您没有使用任何

mat error

，也没有在按钮上使用条件。您是否阅读了反应表单和物料表单字段的文档？