角模板驱动的表单

角模板驱动的表单是Angular中的一种表单类型，它使用了角模板语法，可以使用户更加方便地构建表单。

特点

1. 角模板语法：使用角模板语法，可以简化表单的构建，提高代码可读性和可维护性。

2. 双向数据绑定：使用双向数据绑定机制，可以将表单与组件的属性相互关联，不需要手动处理表单数据。

3. 校验机制：角模板驱动的表单自带校验机制，可以对表单数据进行校验，并显示出错误信息。

使用方式

1. 模板层级表单控件

角模板驱动的表单通过ngModel指令和name属性绑定表单数据，同时可以使用ngForm指令来定义模板层级的表单控件。示例代码如下：

<form #myForm="ngForm">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" name="username" ngModel>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" ngModel>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="myForm.form.invalid">Submit</button>
</form>

2. 表单嵌套控件

可以使用ngModelGroup指令对表单进行分组，同时使用ngForm指令来定义表单嵌套控件。示例代码如下：

<form #myForm="ngForm">
  <fieldset ngModelGroup="address">
    <legend>Address</legend>
    <div class="form-group">
      <label for="street">Street</label>
      <input type="text" class="form-control" id="street" name="street" ngModel>
    </div>
    <div class="form-group">
      <label for="city">City</label>
      <input type="text" class="form-control" id="city" name="city" ngModel>
    </div>
    <div class="form-group">
      <label for="state">State</label>
      <input type="text" class="form-control" id="state" name="state" ngModel>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-primary" [disabled]="myForm.form.invalid">Submit</button>
</form>

表单校验

角模板驱动的表单支持多种校验方式，包括必填项、最小值、最大值等，可以使用required、min、max等指令进行校验。示例代码如下：

<form #myForm="ngForm">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" name="username" ngModel required>
    <div *ngIf="myForm.submitted && myForm.controls.username.invalid">
      <div *ngIf="myForm.controls.username.errors.required">Username is required.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" class="form-control" id="age" name="age" ngModel min="18" max="120">
    <div *ngIf="myForm.submitted && myForm.controls.age.invalid">
      <div *ngIf="myForm.controls.age.errors.min">Age must be at least 18.</div>
      <div *ngIf="myForm.controls.age.errors.max">Age cannot be more than 120.</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="myForm.form.invalid">Submit</button>
</form>

总结

角模板驱动的表单可以使用户更加方便地构建表单，同时还提供了强大的校验机制，可以进行多种校验方式。不过，它和反应式表单相比，可能不太适用于更复杂的应用程序。