Angular Template-driven 表单控件详解与示例

本文主要介绍了在Angular的Template-driven表单模式下如何使用常见的表单控件，包括text、number、radio、select、multiselect、cascading select、checkbox、multicheckbox等，并提供了相关控件的代码示例。文章还提到了数据接口的定义，以展示如何绑定数据模型。 在Angular的Template-driven表单中，开发者可以利用Angular的双向数据绑定特性（[(ngModel)])来创建交互式的表单。以下是一些关键控件的使用方法： 1. Text: 用于输入文本，例如名字。通过`<input type="text" class="form-control" name="name" [(ngModel)]="user.name">`，`user.name`是数据模型中的属性，与输入框的值保持同步。 2. Number: 用于输入数字，如年龄。同样使用`[(ngModel)]`，如`<input type="number" class="form-control" name="age" [(ngModel)]="user.age">`。 3. Radio: 用于选择单一选项，例如性别。通过`<label *ngFor="let gender of genders"><input type="radio" name="gender" [value]="gender.value" [(ngModel)]="user.gender"> {{gender.display}}</label>`，`genders`数组包含可选的性别选项。 4. Select(基本类型): 用于选择一个值，例如角色。可以使用`<select class="form-control" name="role" [(ngModel)]="user.role"><option *ngFor="let role of roles" [value]="role">{{role}}</option></select>`，其中`roles`是角色的列表。 5. Select(对象): 当选择项是复杂对象时，例如主题`Theme`。使用方式类似，但`value`需要匹配对象的引用。 6. Multiselect: 用于多选，例如爱好。可以使用`<select multiple class="form-control" name="hobbies" [(ngModel)]="user.hobbies"><option *ngFor="let hobby of hobbies" [value]="hobby">{{hobby}}</option></select>`，`hobbies`是可选爱好的列表。 7. Cascading Select(级联操作): 在这种情况下，选择一个值会影响其他下拉框的选项，通常需要配合服务和事件处理来实现。 8. Checkbox(布尔值): 用于勾选状态，例如是否激活。可以使用`<input type="checkbox" class="form-control" name="isActive" [(ngModel)]="user.isActive">`。 9. Multicheckbox: 对于多个可选的复选框，如话题。可以使用`<div *ngFor="let topic of topics"><input type="checkbox" name="topics" [(ngModel)]="user.topics[topic]" value="{{topic}}">{{topic}}</div>`，`topics`是话题的数组。 这些控件的使用通常需要结合数据接口定义，如`User`和`Theme`接口，来确保数据模型的正确性。在实际应用中，开发者需要根据业务需求调整这些示例，以满足特定的表单功能和样式要求。