要获取响应式表单中刚刚更改的值,可以使用valueChanges
方法订阅表单控件的值变化。以下是一个使用Angular的响应式表单的示例:
在组件的模板文件中,定义一个响应式表单:
在组件的类文件中,创建响应式表单,并订阅表单控件的值变化:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myInput: ['']
});
this.myForm.get('myInput').valueChanges.subscribe(value => {
console.log('New value:', value);
});
}
}
在上述示例中,valueChanges
方法会返回一个Observable
,我们可以通过订阅它来获取表单控件的值变化。在订阅的回调函数中,我们可以获取到刚刚更改的值,并进行相应的处理。
注意:在使用响应式表单之前,需要先导入ReactiveFormsModule
模块,并将其添加到应用的模块中。