在Angular中,我们可以使用响应式表单(Reactive form)实现双向数据绑定(two way data binding)。具体实现方法如下:
在模板中使用表单控件指令,如input、select、textarea等。同时使用[(ngModel)]指令进行双向绑定,将控件中的值与组件中的属性进行关联。
在组件中使用FormGroup和FormControl类对表单进行管理,即创建FormGroup实例,将FormControl实例添加到FormGroup中进行管理。
举例说明:创建一个名为“form”的FormGroup,并添加两个FormControl属性,分别为“name”和“age”,然后在模板中使用input控件和[(ngModel)]指令进行双向绑定:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
form = new FormGroup({
name: new FormControl(''),
age: new FormControl(0),
});
}
这样,我们就可以通过修改表单控件中的值来更新组件中的属性,同时也可以通过改变组件中的属性来更新表单控件中的值。