Angular Reactive Form是一种强大的方式,用于以响应式的方式处理表单控件数据,并结合使用Angular Material的mat-select组件实现下拉列表。以下是示例代码:
在组件中:
import { Component } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: ['./my-form.component.css'] }) export class MyFormComponent { myForm: FormGroup; options: string[] = ['Option 1', 'Option 2', 'Option 3'];
constructor(private fb: FormBuilder) { this.createForm(); }
createForm() { this.myForm = this.fb.group({ mySelect: ['', Validators.required] }); } }
在模板中: