Блог

Я пытаюсь поместить значения, введенные в полях ввода, в массив, используя угловые формы при отправке формы, и для этого я создал массив, содержащий имена всех полей ввода. Но всякий раз, когда я пытаюсь передать значения этого массива в form.control.value, он возвращает ошибку:

Не удается прочитать свойство ‘0’ неопределенного

HTML:

  <form (ngSubmit)="onSubmit(feed)" #feed="ngForm">
   <input type="text" ngModel name="fullName" id="fullName"  #fullName="ngModel">
   <input type="email" ngModel name="email" id="email" #email="ngModel">
   <input type="tel" ngModel name="telephone" id="telephone" #telephone="ngModel">
   <input type="text" ngModel name="city" id="city" #city="ngModel">
   <textarea ngModel name="message" id="message" #message="ngModel"></textarea>
   <button type="submit" id="submit">SEND</button>
</form>
  

В App.Component.ts:

 onSubmit(form:NgForm){
  let contact = [];
  const fieldArr = ['fullName','email','telephone','city','message'];
  for(let i=0; i < fieldArr.length; i  ) {
    let holder = form.control.value.fieldArr[i];
    contact.push(holder);
  }
  console.log(contact);
}
  

Пожалуйста, помогите.

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

   const fieldArr = ['fullName','email','telephone','city','message'];
  for(let i=0; i < fieldArr.length; i  ) {
    let holder = form.control.value.fieldArr[i];
    contact.push(holder);
  }
  

Здесь вы пытаетесь получить доступ к свойству с именем ‘fieldArr’ в ‘form.control.value’. Исходя из представленного кода, для значения не будет существовать такого свойства. Таким образом, вы получаете ответ.

 Cannot read property '0' of undefined
  

Однако я думаю, что ваш подход может быть более серьезной проблемой. Вы пробовали выйти из form.value? Это можно было бы сделать в инструкции, подобной этой.

 console.log(form.value);
  

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

Я нашел angular.io сайт должен быть очень полезен с примерами, подобными этому. То, с чем вы работаете, — это то, что они называют реактивными формами. Вот ссылка на их руководство. Надеюсь, это поможет. https://angular.io/guide/reactive-forms