使用Angular模板驱动表单的多选功能可以通过使用<select>
元素结合multiple
属性来实现。在Angular中,可以使用FormControl
或FormGroup
来管理表单控件的值和状态。
下面是一个完整的示例代码:
<form>
<label for="fruits">选择水果:</label>
<select id="fruits" name="fruits" multiple [(ngModel)]="selectedFruits">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select>
</form>
在上面的代码中,我们使用<select>
元素创建一个多选框,并使用[(ngModel)]
指令将选中的值绑定到selectedFruits
属性上。multiple
属性表示允许选择多个选项。
在组件类中,需要定义selectedFruits
属性来存储选中的水果值:
import { Component } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
selectedFruits: string[] = [];
}
这样,当用户选择一个或多个水果时,selectedFruits
属性会自动更新。
领取专属 10元无门槛券
手把手带您无忧上云