Angular 响应式表单模板是使用 Angular 的响应式表单模块来创建动态表单的一种方式。下面是一个包含代码示例的解决方法:
ng new angular-reactive-forms
cd angular-reactive-forms
ng generate component form
form.component.html
文件中添加表单模板:
form.component.ts
文件中添加表单逻辑:import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.myForm.valid) {
console.log('Form submitted!');
console.log(this.myForm.value);
}
}
}
app.component.html
文件中使用新创建的表单组件:
ng serve
打开浏览器并访问 http://localhost:4200
,你将看到一个包含响应式表单的页面。输入姓名和电子邮件,并点击提交按钮,你将在浏览器的开发者工具中看到表单的值被打印出来。
上述代码示例演示了如何使用 Angular 响应式表单模板创建一个简单的表单,并在提交时验证表单的有效性。你可以根据需要扩展表单模板和逻辑。
上一篇:Angular 响应式表单禁用组