在Angular中,可以使用valueChanges
方法来监听表单控件的值的变化。以下是一个示例:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ''
});
this.myForm.get('name').valueChanges.subscribe((value) => {
console.log('Value changed:', value);
});
}
}
FormsModule
和ReactiveFormsModule
到你的模块:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormComponent } from './form.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
FormComponent
],
bootstrap: [FormComponent]
})
export class AppModule { }
这样,每当用户在输入框中输入时,valueChanges
的订阅者将被调用,并且可以在控制台中打印出新的值。你可以根据自己的需求来处理这个新的值。