フォーム入力の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です。だから、あなたはそれを追加する必要があります。name="meta[keywords]"と

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

しかし、覚えておいて、これはあなたのオブジェクトが見えるので、フォームが作成したオブジェクトのプロパティの名前としてのための唯一の文字列リテラル名ですこのような：metaのオブジェクトのプロパティを読み取るようにしようとしているのでconsole.log(form.value.meta);は、エラーがスローされますでもconsole.log(form.value.meta[keywords])値、undefinedを印刷することを意味します

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

...。うまくいく方法は、form.value['meta[keywords]']です。フォームオブジェクトの実際のプロパティを指すようにします。

あなたが本当に望むのは、フォームにmetaオブジェクトを使用することだと思います。次に、Bartのような双方向バインディングを使用してください。