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

Question

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

这是我的 html，可能需要所有选项的 ID。同样，所有输入字段 linking 和我用作参考的 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 添加到您的 select 字段即可。我在 https://angular-smhjoc.stackblitz.io

试过了

public selectedFields: string[] = [];

里面HTML

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

selecting 后，selectedFields 将有一个字符串数组 selected

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

saving multiple value options from a form that uses the select tag in Angular 4

forms

select

bind

options

angular