表单输入的 Gat 数组 Angular2

Question

我正在 Angular2 中构建一个应用程序，并且正在努力获取以下输入的值。

HTML表格

<form (ngSubmit)="createPage(f)" #f="ngForm">
    <textarea name="meta[keywords]" id="keywords" class="form-control"></textarea>
    <textarea name="meta[description]" id="description" class="form-control"></textarea>
</form>

app.component.ts

...
export class AppComponent {
   createPage(form: NgForm) {
      console.log(form.value.meta);
   }
}

就目前而言，它一直返回 null。任何帮助将不胜感激。

Answer 1

您可以使用模板驱动表单或模型驱动表单。如果您正在寻找基本的模板驱动方法，这将解决它：

<form (ngSubmit)="createPage()">
    <textarea [(ngModel)]="meta.keywords" name="meta[keywords]" id="keywords" class="form-control">
    </textarea>
    <textarea [(ngModel)]="meta.description" name="meta[description]" id="description" class="form-control">
    </textarea>
</form>

...
export class AppComponent {
   meta: any = {};
   createPage() {
      console.log(this.meta.keywords, this.meta.description);
   }
}

Answer 2

您缺少的是 ngModel 来绑定表单中的值。所以你需要添加：

<form (ngSubmit)="createPage(f)" #f="ngForm">
    <textarea name="meta[keywords]" ngModel></textarea>
    <textarea name="meta[description]" ngModel></textarea>
</form>

但是，对于 name="meta[keywords]"，请记住，这只是一个字符串文字名称，作为表单创建的对象中属性的名称，因此您的对象看起来像这个：

{
  "meta[keywords]": "",
  "meta[description]": ""
}

... 这意味着 console.log(form.value.meta); 将打印 undefined，甚至 console.log(form.value.meta[keywords]) 值也会抛出错误，因为它正在尝试读取属性的对象 meta。唯一可行的方法是：form.value['meta[keywords]']，然后指向表单对象的实际属性。

所以总而言之，我想您真正想要的是为表单使用 meta 对象。然后像 Bart 建议的那样使用双向绑定。

表单输入的 Gat 数组 Angular2

Gat Array of form inputs Angular2

javascript

arrays

angular2-forms

angular