HTMLからデータを渡さない角形

Question

HTMLの<select>要素の入力データをAngular Forms自体に渡すときに問題があるようです。

ここに私のコードがあります。

ファイル名：家庭page.component.html

<form [formGroup]="rForm" (ngSubmit)="addPaste(rForm.value)"> 

    ... 

    <div class="input-field col s12"> 
     <select formControlName="pasteSyntax"> 
      <option *ngFor="let choices of pasteSyntaxChoices" [value]="choices.value">{{ choices.text }}</option> 
     </select> 
     <label>Syntax Highlighting</label> 
    </div> 

    ... 

</form> 

ファイル名：家庭page.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-home-page', 
    templateUrl: './home-page.component.html', 
    styleUrls: ['./home-page.component.css'] 
}) 

export class HomePageComponent implements OnInit { 

    rForm: FormGroup; 
    paste: any; 

    ... 

    pasteSyntax: string = ''; 

    ... 

    pasteSyntaxChoices = [ 
     { value: "plain", text: "Plain Text" }, 
     { value: "html", text: "HTML" }, 
     { value: "css", text: "CSS" }, 
     { value: "js", text: "JavaScript" }, 
     { value: "php", text: "PHP" }, 
     { value: "perl", text: "Perl" }, 
     { value: "go", text: "Go (Golang)" } 
    ]; 

    constructor(private fb: FormBuilder) { 
     this.rForm = fb.group({ 

      ... 

      'pasteSyntax': [null, Validators.required] 

      ... 

     }); 
    } 

    addPaste(paste) { 

     ... 

     this.pasteSyntax = paste.syntax; 

     ... 

     console.log(paste); 
    } 

    ngOnInit() {} 

} 

追加情報：

@angular/animations: 4.2.4 
@angular/common: 4.2.4 
@angular/compiler: 4.2.4 
@angular/core: 4.2.4 
@angular/forms: 4.2.4 
@angular/http: 4.2.4 
@angular/platform-browser: 4.2.4 
@angular/platform-browser-dynamic: 4.2.4 
@angular/router: 4.2.4 
core-js: 2.4.1 
rxjs: 5.4.2 
zone.js: 0.8.14 

（ console.logから）

予想される出力：（console.logから）

Object 
    pasteSyntax: "plain" 

電流出力：

Object 
    pasteSyntax: null 

私が間違って行ったのか、私は間違った構文を使用したところ

は誰も私を伝えることができ ？

Answer 1

あなたの問題は、あなたのaddPasteにこの行です：

this.pasteSyntax = paste.syntax; 

それは次のようになります。

this.pasteSyntax = paste.pasteSyntax; 

しかしNilandriで述べたように、あなたは変数にする必要はありません、あなたは値にアクセスすることができますテンプレート内のフォームから、またはをパラメータとしてフォームを送信するときにpasteSyntaxプロパティを印刷します。

addPaste(value) { 
    console.log(value.pasteSyntax); 
    console.log(this.rForm.get('pasteSyntax').value); 
    // or 
    console.log(this.rForm.controls.pasteSyntax.value) 
} 

DEMO