переназначить управление отсоединить директиву 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)
  }

Stackblitz: https://stackblitz.com/edit/angular-wjxhkj

Обновление

На основании вашего комментария вы можете подписаться на valueChanges при создании нового FormControl:

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

Я обновил Stackblitz.