Question

我试图在提交表单时使用Angular Forms将输入字段中输入的值放入数组中，为此，我创建了一个包含所有输入字段名称的数组。但是，每当我尝试将此数组的值传递给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);
}

请帮助。

Answer 1

我认为您遇到的直接问题与您随后的声明有关

  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);
  }

在这里，您尝试访问“ form.control.value”上名为“ fieldArr”的属性。根据提交的代码，该值将不存在此类属性。这样您得到的响应。

Cannot read property '0' of undefined

但是，我认为您的方法可能是更大的问题。您是否尝试过注销form.value？可以在这样的语句中完成。

console.log(form.value);

我想如果这样做，您将在其中看到一个对象，其中包含您要查找的所有输入值。它甚至可能已经按照您希望的格式进行了格式化。

我发现angular.io网站对于此类示例非常有帮助。您正在使用的是它们称为反应式表格。这是他们指南的链接。希望能帮助到你。 https://angular.io/guide/reactive-forms

Angular Forms中的form.control.value.any_input_name不从数组获取值

1 个答案: