Установите начальное значение в массиве форм для автозаполнения

#angular #forms #angular-material #formarray #mat-autocomplete

Вопрос:

У меня есть FormArray, который представляет собой список, в который вы можете добавлять, редактировать и удалять. Все работает нормально, но я хотел бы установить начальное значение для первых двух значений. Он отлично работает для входного значения, но мое автозаполнение мата заполняется неправильно. вот штекблитц.

ФАЙЛ .TS

   initItems() {
    var formArray = this.fb.array([]);

    for (let i = 0; i < 2; i  ) {
      formArray.push(
        this.fb.group({
          unititem: ['syed', [Validators.required]],
          age: ['14', [Validators.required]]
        })
      );
    }
    return formArray;
  }
 
 

Ответ №1:

Вам нужно инициализировать unititem с помощью опции объекта, например :

 for (let i = 0; i < 2; i  ) {
  formArray.push(
    this.fb.group({
      unititem: [this.options[0], [Validators.required]],
      age: ['14', [Validators.required]]
    })
  );
}
 

Обновление на основе комментариев:

Вы можете найти имя в своем массиве объектов, таких как

 for (let i = 0; i < 2; i  ) {
  formArray.push(
    this.fb.group({
      this.options.find(({ itemName }) => itemName === 'syed'),
      age: ['14', [Validators.required]]
    })
  );
}
 

Комментарии:

1. Это работает для данного примера, но что это за сохраненные данные, которые вы пытаетесь заполнить. как бы вы узнали, какой вариант использовать, если вы знаете только название

2. Спасибо, это единственный способ, хотя. Я нашел этот пример в Интернете, но моя реальная проблема в том, что выпадающий список исходит от службы, которая фильтрует по мере ввода.