以下是一个示例,演示如何在Angular中创建嵌套的单选按钮和复选框。
首先,确保已经安装了Angular CLI。然后,创建一个新的Angular项目。
运行以下命令:
ng new angular-forms-example
进入项目目录:
cd angular-forms-example
创建一个新的组件:
ng generate component nested-form
打开nested-form.component.html
文件,并添加以下代码:
打开nested-form.component.ts
文件,并添加以下代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-nested-form',
templateUrl: './nested-form.component.html',
styleUrls: ['./nested-form.component.css']
})
export class NestedFormComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
topping: this.formBuilder.group({
cheese: false,
pepperoni: false
}),
crust: this.formBuilder.group({
type: 'thin'
})
});
}
submit() {
console.log(this.form.value);
}
}
打开app.module.ts
文件,并添加以下代码:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NestedFormComponent } from './nested-form/nested-form.component';
@NgModule({
declarations: [
AppComponent,
NestedFormComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,打开app.component.html
文件,并添加以下代码:
运行项目:
ng serve
在浏览器中打开http://localhost:4200
,就可以看到带有嵌套单选按钮和复选框的响应式表单了。