Angular-testreactiveformcontrolenableonvaluechanges
在Angular中，我们可以使用响应式表单来创建表单并侦听表单控件的值变化。有时，当表单控件的值发生变化时，我们希望启用其他相关控件。以下是一个示例：
首先，我们创建一个响应式表单并添加两个表单控件：
在组件类中，我们可以这样初始化表单和表单控件：
import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
template: ,
})
export class AppComponent {
myForm: FormGroup;
ngOnInit() { this.myForm = new FormGroup({ firstName: new FormControl(), lastName: new FormControl(), }); } }
现在，我们需要在firstName控件的值更改时启用lastName控件。我们可以通过订阅firstName控件的valueChanges属性来实现：
import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
template: ,
})
export class AppComponent {
myForm: FormGroup;
enableLastName: boolean = false;
ngOnInit() { this.myForm = new FormGroup({ firstName: new FormControl(), lastName: new FormControl(), });
this.myForm.get('firstName').valueChanges.subscribe((value: string) => {
this.enableLastName = value ? true : false;
});
} }
在这个示例中，我们订阅了firstName