Angular Template-driven 表单控件实战指南

本文主要探讨了Angular框架中的Template-driven表单控件的使用，包括text、number、radio、select（基本类型与对象）、multi select、cascading select（级联操作）、checkbox（boolean）以及multi checkbox。同时，还定义了数据接口`User`，包含了用户信息如姓名、年龄、性别、角色、主题、激活状态、爱好、话题、省和市等字段。此外，文中给出了部分控件的HTML模板代码示例。 在Angular中，Template-driven表单是一种基于HTML模板的表单构建方式，通过使用`ngModel`指令来绑定表单控件和组件属性，实现数据双向绑定。以下是对各控件的详细说明： 1. Text：用于输入文本的基本控件，例如姓名，HTML代码如下： ```html <div class="form-group"> <label>名字</label> <input type="text" class="form-control" name="name" [(ngModel)]="user.name"> </div> ``` 2. Number：用于输入数字的控件，可以限制用户输入非数字字符，例如年龄： ```html <div class="form-group"> <label>年龄</label> <input type="number" class="form-control" name="age" [(ngModel)]="user.age"> </div> ``` 3. Radio：用于单选选择，例如性别，需要配合`ngFor`循环遍历选项： ```html <div class="form-group"> <label>性别</label> <label *ngFor="let gender of genders"> <input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value"> {{ gender.display }} </label> </div> ``` 其中，`genders`数组包含每个选项的值和显示文本。 4. Select：提供下拉选择，可以是基本类型或对象，例如选择角色： ```html <div class="form-group"> <label>角色</label> <select class="form-control" name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [value]="role">{{ role }}</option> </select> </div> ``` 5. Multi Select：多选下拉，例如用户的话题： ```html <div class="form-group"> <label>话题</label> <select multiple class="form-control" name="topics" [(ngModel)]="user.topics"> <option *ngFor="let topic of topics" [value]="topic">{{ topic }}</option> </select> </div> ``` 6. Cascading Select（级联操作）：当一个选择项依赖于另一个选择项的结果时，如省和市的选择，通常需要使用服务来动态加载下级选项。 7. Checkbox（boolean）：用于勾选状态，例如激活状态： ```html <div class="form-group"> <label>是否激活</label> <input type="checkbox" class="form-control" name="isActive" [(ngModel)]="user.isActive"> </div> ``` 8. Multi Checkbox：多选框，例如用户的爱好，可以是一个对象数组，键为爱好名称，值表示是否选中： ```html <div class="form-group"> <label>爱好</label> <ul> <li *ngFor="let hobby of hobbiesKeys"> <input type="checkbox" name="{{hobby}}" [(ngModel)]="user.hobbies[hobby]"> {{ hobby }} </li> </ul> </div> ``` 其中，`hobbiesKeys`是`user.hobbies`对象的键组成的数组。 以上就是Angular Template-driven表单中常见控件的使用方法和示例，它们使得开发者能够方便地创建交互式的用户界面，并有效地管理用户输入的数据。