選択タグを角度4で使用するフォームから複数の値オプションを保存する

Question

私は、提出後にユーザーを作成するフォームをAngular 4プロジェクトに作成しました。入力フィールドで生成されたフォームの値をすべてユーザーにアタッチすることができましたが、複数選択内で値を取り込む方法がわかりません...下のコードは、私がユーザー-new.component.html Selectのどの部分がngModelを受け取っているのか分かりませんが、オプションがselectタグと通信する必要があると推測しています...私は確かではありません...私はmaterialize cssを使用していますが、selectタグはちょうどリンクのすぐ下のものオプションは私が見るものから救われますが、私はそれらを接続するために何もしていないので、彼らは私のユーザーと関連付けられていないことを知っています。

すべてのオプションでidが必要なHTMLがあります。ここでも、すべてのリンクの入力フィールドと、私が使用していますmaterialzie CSSのページ参照 http://materializecss.com/forms.html

<h4>UserNewComponent</h4> 
<div class="row"> 
    <form materialize class="col s12" (submit)="create()"> 
    <div class="row"> 
     <div class="input-field col s12"> 
     <input id="username" name="username" type="text" class="validate" [(ngModel)]="newUser.username"> 
     <label for="username">USERNAME?</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s12"> 
     <textarea id="textarea1" name="motto" class="materialize-textarea" [(ngModel)]="newUser.motto"></textarea> 
     <label for="textarea1">YOUR MOTTO. THE REASON YOU ARE HERE?</label> 
     </div> 
    </div> 
    <div class="input-field col s12"> 
     <select multiple> 
     <option value="" disabled selected>GENRES THAT YOU FANCY</option> 
     <option value="acoustic">ACOUSTIC</option> 
     <option value="alternative_rock">ALTERNATIVE ROCK</option> 
     <option value="blues">BLUES</option> 
     <option value="classic_rock">CLASSIC ROCK</option> 
     <option value="classical">CLASSICAL</option> 
     <option value="comedy">COMEDY</option> 
     <option value="country">COUNTRY</option> 
     <option value="electronic">ELECTRONIC</option> 
     <option value="experiemntal">EXPERIMENTAL</option> 
     <option value="jazz">JAZZ</option> 
     <option value="metal">METAL</option> 
     <option value="pop">POP</option> 
     <option value="raggae">RAGGAE</option> 
     <option value="rap">RAP</option> 
     <option value="rock">ROCK</option> 
     <option value="r_and_b">R&B</option> 
     </select> 
     <label for="genres">GENRE(S)</label> 
    </div> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <input id="password" name="password" type="password" class="validate" [(ngModel)]="newUser.password"> 
      <label for="password">PASSWORD</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s12"> 
     <input id="confirmPassword" name="confirmPassword" type="password" class="validate" [(ngModel)]="newUser.confirmPassword"> 
    <label for="confirmPassword">CONFIRM THIS</label> 
     </div> 
    </div> 
    <input type="submit" value="SIGN UP" class="waves-effect waves btn-large red col s12"> 
    </form> 
</div> 

としてこれは私の角4 user.ts

export class User { 
    constructor(
     public _id: number = Math.floor(Math.random()*100), 
     public username = "", 
     public motto: string = "", 
     public genres:string[] = [], 
     public password: string = "", 
     public confirmPassword: string = "", 
     public editable: boolean = false 
    ){} 
} 

ですが、私はジャンルにオプションを追加するべきarrary私は作成していますか？

は最後に、ここに私のユーザーnew.component.ts

import { User } from "./../user"; 
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-user-new', 
    templateUrl: './user-new.component.html', 
    styleUrls: ['./user-new.component.css'] 
}) 
export class UserNewComponent implements OnInit { 
    newUser = new User(); 
    @Output() createNewUserEvent = new EventEmitter(); 

    constructor() { } 

    ngOnInit() { 
    } 

    create(){ 
    // call server to save 
    this.createNewUserEvent.emit(this.newUser); 
    this.newUser = new User(); 
    } 

} 

Answer 1

ちょうどあなたの選択フィールドにngModelを追加し、それが動作するはずです。私が選択するとhttps://angular-smhjoc.stackblitz.io

public selectedFields: string[] = []; 

インサイドHTML

で

<select multiple ([ngModel])="selectedFields" > 

を、それを試してみました、selectedFieldsは、私は同じ問題に遭遇すると思う