Angular中的模板驱动表单和响应式表单是两种不同的表单处理方式。它们的主要区别在于数据的管理方式和代码的组织结构。
示例代码如下:
在上面的示例中,使用ngModel指令进行双向数据绑定,表单控件的值存储在组件类的name属性中。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } 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;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl('', Validators.required)
});
}
}
在上面的示例中,使用FormGroup和FormControl对象来创建表单控件,表单控件的值存储在组件类的myForm属性中。