要解决Angular响应式表单未提交所选的选项值的问题,可以按照以下步骤进行:
在组件的HTML模板中,使用formGroup
指令创建一个响应式表单,并为每个表单控件分配一个FormControl对象。
在组件的TypeScript文件中,创建一个FormGroup对象,并为每个表单控件创建FormControl对象。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
options: string[] = ['选项1', '选项2', '选项3'];
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myOption: [''] // 设置初始值为空字符串
});
}
onSubmit() {
console.log(this.myForm.value); // 输出表单值
}
}
调用onSubmit()
方法来处理表单提交事件,可以在该方法中将表单的值发送到服务器或执行其他操作。
通过以上步骤,当用户选择一个选项并点击提交按钮时,表单的值将会被正确地提交。你可以在控制台中查看表单的值,或者根据需要进行进一步的操作。