在Angular中,可以使用FormControl
和ngModel
指令来实现根据输入可变的表单。
首先,需要导入相关的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
在组件类中,创建一个FormControl
对象来跟踪输入字段的值。同时,还可以添加一个OnInit
生命周期钩子来初始化表单控件:
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent implements OnInit {
inputValue: string;
inputControl: FormControl;
ngOnInit() {
this.inputControl = new FormControl('');
}
}
在模板中,使用[(ngModel)]
指令绑定输入字段的值到组件类中的inputValue
属性。同时,使用[formControl]
指令将FormControl
对象绑定到输入字段上。
使用这种方式,每当输入字段的值发生变化时,inputValue
属性和FormControl
对象的值都会更新。
可以在组件中访问inputValue
属性来获取输入字段的值,也可以通过inputControl.value
来获取。
希望上述代码对你有所帮助!