Получение значения ngmodel из дублированных форм

#javascript #angular #typescript #angular8 #angular9

#javascript #угловой #машинопись #angular8 #angular9

Вопрос:

Извините, если это глупый вопрос, но я так много пробовал. У меня есть два поля формы, которые дублируются кнопкой добавления. Итак, здесь я пытаюсь получить доступ к вводу из value formfield с помощью ngmodel. Но когда я дублирую набор formfield с помощью кнопки добавления. Ввод, который я ввел в поле формы значения, повторяется, когда я нажимаю кнопку добавить. Это происходит, когда я использую ngmodel для получения значения. Есть ли какой-нибудь другой способ решить эту проблему? Прокомментируйте, если у вас есть какие-либо сомнения относительно вопроса

Мой пример кода: https://codesandbox.io/s/formarraydynamic-forked-t7y9u?file=/src/app/app.component.ts

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

1. Я думаю, вам следует использовать FormArray.

2. Может ли u plsss привести пример, как это сделать? @TitusSutioFanpula

3. Почему вы используете ngModel, к вашему сведению, к нему уже привязан FormControl. Я являюсь оригинальным создателем этого codesandbox, который вы разветвляли.

4. Я не могу получить эти значения с помощью formcontrol. Да, и извините, я отдаю вам должное за это @VimalPatel

5. Вы используете «this.myForm.value», пожалуйста, проверьте это. codesandbox.io/s/formarraydynamic-rqdhc

Ответ №1:

Чтобы получить значение из формы и отобразить его в пользовательском интерфейсе. Вы можете создать свойство getter в component, которое будет возвращать значение из этого конкретного поля следующим образом.

 get values() {
    return this.myForm.value.map(x => x.value);
};
 

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

 <p>result:{{values}}</p>
 

Поскольку ваша форма является FormArray, вы получите результат в виде массива.

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

1. Привет, в этом codesandbox в коде ur я пытаюсь удалить набор formfield (я имею в виду после дублирования). В моей html-кнопке я использовал this (click)=»DelBtn(a)», а в моем ts я использовал это DelBtn = (delIndex) => this.myForm.controls.splice(delIndex, 1);

2. Если у меня есть три дубликата, этот код удаляет тот, который присутствует первым сверху. Есть ли какой-нибудь способ удалить последнюю дублированную форму? @Vimal

3. создайте изолированную среду и поделитесь ссылкой

4. codesandbox.io/s/formarraydynamic-forked-t7y9u?file=/src/app /… Это ссылка @Vimal

5. На самом деле это удаление первого в массиве вместо последнего