Angular FormControl valueChanges 不起作用
Posted
技术标签:
【中文标题】Angular FormControl valueChanges 不起作用【英文标题】:Angular FormControl valueChanges doesn't work 【发布时间】:2017-11-20 00:11:39 【问题描述】:如果通过订阅进行更改,我想获得我的表单(“家庭”)值之一,但似乎有问题,因为我的控制台日志上什么也没有。
import Component , AfterViewInit from '@angular/core';
import FormGroup,FormBuilder from '@angular/forms';
import Observable from 'rxjs/Rx';
@Component(
selector: 'app-root',
template: `<form [formGroup]="frm1">
<input type="text" formControlName="name" >
<input type="text" formControlName="family">
</form>
`,
)
export class AppComponent implements AfterViewInit
frm1 : FormGroup;
constructor( fb:FormBuilder)
this.frm1 = fb.group(
name : [],
family: []
);
ngAfterViewInit()
var search = this.frm1.controls.family;
search.valueChanges.subscribe( x => console.log(x));
【问题讨论】:
为什么不在 html 的输入字段中使用change()
事件处理程序?
【参考方案1】:
在表单变量frm1
上使用get
方法。并使用ngOnInit()
而不是ngAfterViewInit()
ngOnInit()
this.frm1.get('family').valueChanges.subscribe( x => console.log(x));
【讨论】:
将代码放入ngOnInit()
并尝试。没有理由在ngAfterViewInit()
内做事
感谢它的工作,我可以知道为什么 AfterViewInit 有问题!
这是我建议的解决方法,没有理由在AfterViewInit
中观看表单控件,因为您正在处理模型驱动的表单并且您拥有所有表单控件名称。所以理想的地方是 onInit()。
我遇到了这个问题,因为我正在将此功能与带有异步管道的 ngFor 一起使用,因此它会自动订阅并且一切正常。现在我正在使用另一个带有 formControl 的控件,但我忘记订阅了 :( 感谢您的提示!
首选rxjs
其他功能(例如startWith
和map
)而不是使用subscribe
:this.control.valueChanges.pipe(startWith(''), map(opt => this.isMatch(name)));
【参考方案2】:
试试这个:
import Component , AfterViewInit, OnInit from '@angular/core';
import FormGroup,FormBuilder from '@angular/forms';
import Observable from 'rxjs/Rx';
@Component(
selector: 'app-root',
template: `<h1>Hello World!</h1>
<form [formGroup]="frm1">
<input type="text" formControlName="name" >
<input type="text" formControlName="family">
</form>`)
export class AppComponent implements AfterViewInit, OnInit
frm1 : FormGroup;
constructor( private formBuilder: FormBuilder)
ngOnInit(): void
this.formInit();
this.formSet();
formInit(): void
this.frm1 = this.formBuilder.group(
name: [''],
family['']
)
formSet(): void
const editForm =
name: 'test-name',
family: 'test familty',
;
this.frm1.patchValue(editForm)
ngAfterViewInit()
this.frm1 .controls.family.valueChanges.subscribe(
() =>
console.log(this.frm1 .controls.family.value)
)
【讨论】:
我已经在我的项目中测试过:它有效:你遇到了什么错误 你必须有表单初始化和设置的功能。除了这个。你可以使用 .next() 方法来检测变化 我想:你需要在之后编辑表单,这就是为什么建议表单初始化和设置【参考方案3】:这个问题已经使用了订阅,但以防万一像我这样的人在阅读标题后登陆这里。 valueChanges
也不适用于我,但出于其他原因。
我正在为我的项目使用材料步进器和自动完成功能。他们网站上的示例代码过滤了地图中的数据,但它不起作用。
this.filteredOptions = this.myControl.valueChanges.pipe(startWith(''), map(value => this._filter(value)));
但是订阅valueChange
可以工作并过滤数据。
this.myControl.valueChanges.pipe(startWith('')).subscribe(value => this.filteredOptions = of(this._filter(value)));
【讨论】:
以上是关于Angular FormControl valueChanges 不起作用的主要内容,如果未能解决你的问题,请参考以下文章