從使用Angular 4中的選擇標記的表單保存多個值選項

Question

我在Angular 4項目中有一個表單，它在提交後創建一個用戶。我設法得到了在輸入字段中生成的所有表單值以附加到用戶，但我不確定如何捕獲多個select中的值......我的代碼如下所示，顯示了我的用戶-new.component.html。我不確定選擇哪個部分接收ngModel，但我猜測選項需要與選擇標記進行通信...我不確定雖然...我正在使用物化css，但我的選擇標記正在工作完全一樣在下面的鏈接中。這些選項會從我所看到的內容中保存下來，但我知道它們並未與我的用戶關聯，因爲我沒有做任何連接它們的操作。

這是我的html，需要所有選項的ID。同樣，所有輸入字段連接和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將有選擇