要解决表单提交后Mat单选按钮的值未发生改变的问题,可以使用Angular的响应式表单来实现。
首先,确保在Angular项目中已经导入了MatRadioModule模块。
在组件的HTML模板中,使用MatRadioGroup和MatRadioButtons来创建单选按钮组。例如:
在组件的TypeScript文件中,创建一个响应式表单并初始化表单控件。例如:
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;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
radioOption: ['option1'] // 初始化单选按钮的默认值
});
}
submitForm() {
console.log(this.myForm.value.radioOption); // 打印表单控件的值
}
}
在上面的示例中,我们使用了响应式表单的方式创建了一个FormGroup,并使用formControlName绑定了MatRadioGroup的值到FormGroup中的radioOption控件。初始化时,将radioOption的默认值设置为'option1'。
当用户选择不同的单选按钮时,FormGroup中的radioOption值会自动更新。
在submitForm()方法中,您可以使用this.myForm.value.radioOption来获取表单控件的值,并进行相应的处理。
请确保在使用这种响应式表单的方式时,已经在模块中导入了ReactiveFormsModule模块。例如:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}