如何在Angular中使用模板驱动的表单验证数字字段？

<form #myForm="ngForm">
  <input type="number" name="myNumber" ngModel>
  <button type="submit">Submit</button>
</form>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @ViewChild('myForm') myForm: NgForm;

  onSubmit() {
    if (this.myForm.valid) {
      // 表单验证通过，执行提交操作
      console.log(this.myForm.value.myNumber);
    }
  }
}

<form #myForm="ngForm">
  <input type="number" name="myNumber" ngModel required min="0" max="100">
  <div *ngIf="myForm.controls.myNumber.invalid && (myForm.controls.myNumber.dirty || myForm.controls.myNumber.touched)">
    <div *ngIf="myForm.controls.myNumber.errors.required">
      数字字段不能为空
    </div>
    <div *ngIf="myForm.controls.myNumber.errors.min">
      数字字段不能小于0
    </div>
    <div *ngIf="myForm.controls.myNumber.errors.max">
      数字字段不能大于100
    </div>
  </div>
  <button type="submit">Submit</button>
</form>