Angular Reactive Form — визуализация элемента управления в массиве форм для массива строк

У меня есть массив строк emails, как показано ниже:

{
   "streetName": "street 1",
   "emails" : [
     "[email protected]",
     "[email protected]"
   ]
}

Как бы я отобразил это в полях ввода реактивной формы?

Я пробовал это, но не работал:

<div class = "row mt-4" formArrayName = "emails">
  <div class = "col" *ngFor = "let email in myform.get('emails')['controls']; let emailIndex=index">
    <input type = "text" placeholder = "" formControlName = "emailIndex"/>
  </div>
</div>

angular angular-reactive-forms formarray

27.12.2022 14:19

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема была в части *ngFor. Вы должны использовать директиву of for [ngForOf]. И передайте emailIndex с атрибутом [formControlName].

<div
  class = "col"
  *ngFor = "
    let email of myform.get('emails')['controls'];
    let emailIndex = index
  "
>
  <input type = "text" placeholder = "" [formControlName] = "emailIndex" />
</div>

Кроме того, вы также должны искать составную часть того, как вы исправляете элемент управления. Вам нужно перебрать каждое значение в массиве data.emails и добавить FormControl к emailsFormArray.

for (let index in this.data.emails) {
  (this.myform.controls.emails as FormArray).controls.push(
    new FormControl(this.data.emails[index])
  );
}

Демо @ StackBlitz

для меня это рендеринг как [object Object]

— 27.12.2022 14:56

Какая часть отображает [object Object]? Можете ли вы создать демо в StackBlitz? Спасибо.

— 27.12.2022 15:01

Я иду к проблеме, я добавляю FormGroup вместо FormControl, ваш код правильный

— 27.12.2022 15:58

27.12.2022 14:38

Другие вопросы по теме

Angular Reactive Form - Как проверить переключатели и показать сообщение об ошибке при отправке формы

Как обновить значение поля реактивной формы при изменении другого значения поля?

Как удалить группу вложенных форм из реактивной формы

Как указать типы значений, возвращаемых формой Angular?

Как использовать FormArray в Angular 14

Несколько значений в конструкторе форм

Отправка данных в объект json в угловом почтовом запросе

Angular 15 — FormsBuilder — TypeError: невозможно прочитать свойства неопределенного (чтение «группы»)

Ошибка проверки угловой реактивной формы не работает при использовании общей формы в 2 дочерних компонентах

Angular 14/+ FormBuilder не принимает RawValue объекта при создании его FormGroup

Angular Reactive Form — визуализация элемента управления в массиве форм для массива строк

Ответы 1

Другие вопросы по теме

Похожие вопросы