HTML:
TypeScript:
export class MyComponent {
user = {
firstName: '',
lastName: ''
};
onFirstNameChange(value: string) {
console.log('First name changed to:', value);
}
onLastNameChange(value: string) {
console.log('Last name changed to:', value);
}
}
valueChanges
方法的pluck
操作符,获取特定表单控件的值更改。例如:HTML:
TypeScript:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { pluck } from 'rxjs/operators';
@Component({
selector: 'my-app',
template: `
`
})
export class MyComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
firstName: '',
lastName: ''
});
this.myForm.get('firstName').valueChanges.pipe(
pluck('target', 'value')
).subscribe(value => {
console.log('First name changed to:', value);
});
this.myForm.get('lastName').valueChanges.pipe(
pluck('target', 'value')
).subscribe(value => {
console.log('Last name changed to:', value);
});
}
}