Как мне установить значение элемента управления формы по умолчанию в этой ситуации?

Question

В настоящее время я работаю над повторно используемыми компонентами с пользовательскими элементами управления полями формы.

У меня есть этот пользовательский элемент управления автозаполнения, который возвращает объект в качестве значения, а затем мой повторно используемый компонент, используя этот пользовательский элемент управления, передает один из следующих элементов: свойства объекта для моей основной формы в виде строки. Вот блиц, чтобы проверить это:

https://stackblitz.com/edit/my-custom-autocomplete-jlkj9q

Это прекрасно работает в одном направлении, управление -> поле многократного использования -> форма.

Вот как я обновляю значение формы из моего повторно используемого компонента:

  ngOnInit(){

      this.state = new FormControl(null);

      // any time the form field value changes update the parent of any change
      this.state.valueChanges
              .pipe(takeUntil(this._destroy))
              .subscribe(value => {
                if(!!value && !!value.name){
                  this.onChange(value.name) //pass only the state.name to the ControlValueAccessor
                  this.onTouched();
                }
                else{
                  this.onChange(value)
                  this.onTouched();
                }
      });
  }

Теперь, когда я устанавливаю значение по умолчанию для поля компонента многократного использования, элемент управления корректно обновляется, но форма значение не Я попытался вызвать метод onChange() для ngOnInit со значением, которое должно быть передано в основную форму, но ничего не произошло. Затем я попытался установить значение по умолчанию для ngAfterViewInit и вызвать onChange следующим образом:

ngAfterViewInit(){

      let defaultValue = {
                  "name": "Arkansas",
                  "population": "2.978M",
                  "flag": "https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg"
                };

      this.state.setValue(defaultValue);    
      this.onChange(defaultValue);
}

, но это тоже не работает.
Что мне здесь не хватает? Любые подсказки?

Answer 1

Для быстрого решения проблемы добавьте

setTimeout(() => this.state.setValue(this.defaultValue), 0);

в конце ngOnInit в поле многоразового использования.

Answer 2

пара вещей ...

1. значение по умолчанию вашей группы форм переопределяет значение, предоставленное вашей формой, метод writeValue вызывается в конце ngOnInit крючок Вы можете обойти это, просто вызвав setValue в форме многократного использования в более позднем хуке

2. , который вы используете onPu sh обнаружение изменений в компоненте приложения в вашем блице. Это означает, что только определенные вещи будут запускать обнаружение изменений, и дочерний компонент, обновляющий значение реактивной формы, НЕ является одним из них. Вот почему вы не видите изменений в ваших шаблонах. Это не имеет большого значения, если вы просто заинтересованы в значении формы, а не в ее отображении на экране, но это ОЧЕНЬ важно, если вы хотите отобразить его, как будто вы удаляете onPu sh обнаружение изменений, вы начнет видеть выражения измененных ошибок, так как дочерний объект, обновляющий что-либо в родительском шаблоне во время инициализации, нарушает однонаправленный поток данных. Обойти это немного сложнее. Истинный ответ здесь заключается в том, что ваша родительская форма действительно должна быть той, которая предоставляет значение по умолчанию.