从使用 Angular 4 中的选择标签的表单中保存多个值选项

Question

我在 Angular 4 项目中有一个表单，提交后会创建一个用户。我设法将在输入字段中生成的所有表单值附加到用户，但我不确定如何在多选中捕获值...我下面的代码显示了我在 user-new.component.html。我不确定 Select 的哪个部分接收到 ngModel，但我猜测该选项需要与 select 标签进行通信......我不确定......虽然我正在使用 materialize css，但我的 select 标签的工作方式与下面链接中的那个。这些选项从我看到的内容中得到保存，但我知道它们与我的用户没有关联，因为我没有做任何事情来连接它们。

这是我的 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>

这是我的 Angular 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  
    ){}
} 

我应该将选项添加到我正在创建的流派数组中吗？

最后，这是我的 user-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 将选择一个字符串数组