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])值也会引发错误，因为它试图读取{{1}的对象属性}}。唯一可行的方法是：meta，然后指向表单对象的实际属性。

总而言之，我想你真正想要的是为你的表单使用form.value['meta[keywords]']对象。然后像Bart建议的那样使用双向绑定。

Gat数组表单输入Angular2

2 个答案: