重新分配控件分离ngcontrol指令

Question

我将指令与ngControl.valueChanges订阅一起使用。当我重新分配表单控件(或此控件的父表单(时，订阅已销毁。

示例：https://stackblitz.com/edit/angular-lhdcfd打开控制台并将一些值传递给输入。订阅也在运行。超时5秒后，将控件重新分配给"321"-指令中的订阅停止工作。

要复制的最小代码：

@Directive({ selector: '[customControl]' })
export class CustomControlDirective {
constructor(private ngControl: NgControl) {}
ngOnInit() {
this.ngControl.valueChanges.subscribe(data => console.log(data));
}
}

@Component({
selector: 'my-app',
template: `<form [formGroup]="form">
<input formControlName="foo" customControl />
</form>`
})
export class AppComponent  {
form = new FormGroup({
foo: new FormControl("123")
});

ngOnInit() {  
setTimeout(() => {
this.form = new FormGroup({
foo: new FormControl("321")
});
}, 5000)
}
}

Answer 1

改为使用patchValue或setValue来设置表单的新值：

ngOnInit() {  
setTimeout(() => {
/*this.form = new FormGroup({
foo: new FormControl("321")
});*/
// instead patchValue() or setValue()
this.form.patchValue({ foo: "321" });
}, 5000)
}

堆叠闪电战：https://stackblitz.com/edit/angular-wjxhkj

更新

根据您的意见，也许您可以在创建新的FormControl:时订阅valueChanges

ngOnInit() {  
setTimeout(() => {
const control = new FormControl("321");
control.valueChanges.subscribe(data => console.log(data));
this.form = new FormGroup({
foo: control
});
}, 5000)
}

我更新了Stacklitz。