Angular 2 如何在选择列表表单中使用 [(ngModel)]

Question

我有一个表单，我需要在其中添加一个选择列表选项，但我真的不知道如何正确编写 HTML。

选择的值必须赋值给field_status并发送到服务器

   <div class="form-group">
            <select [(ngModel)]="support.field_status" class="form-control form-control-sm">
            <option *ngFor="let s of status"  id="field_status" name="field_status"   ngValue= {{s}}>{{s}}</option>
    </select>

这是组件：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Support } from '../shared/models/support.model';
import { SupportService } from './support.service';

@Component({
  selector: 'ndp-support-edit',
  templateUrl: './support-edit.component.html'
})

export class SupportEditComponent implements OnInit {
  form_title: string;
  support: Support;
  nid: number;
  errorMessage: string;
   private status = ['Pending','Assigned','Closed'];
   constructor(
    private supportService: SupportService,
    private router: Router,
    private route: ActivatedRoute,

  ) { 


  }

  save() {
    let _body = {

      _links: {
          type: {
            href: "http://example.co.uk/rest/type/node/support_tickets"
          }
      },
      title: [{ value: this.support.title}],
      field_message: [{ value: this.support.field_message}],
      field_status: [{value: this.support.field_status}]

     };

    if (this.nid) {
      this.supportService.updateSupport(this.nid, _body)
        .map(res => res.json())
        .subscribe(
          response => this.supportService.finishSaveSupport(response, _body),
          error => this.errorMessage = error.json().message
        );
    } else {
        this.supportService.createSupport(_body)
        .map(res => res.json())
        .subscribe(
          response => this.supportService.finishSaveSupport(response, _body),
          error => this.errorMessage = error.json().message
        );
    }
  }

  ngOnInit() {
    if (this.route.snapshot.params['nid']) {
      // Use the node response data from Resolver;
      // @see node.resolver
      this.support = this.supportService.getSupportData(this.route.snapshot.data['support']);
      this.nid = this.support.nid;
      this.form_title = 'Edit support ' + this.support.title + ' [nid:' + this.nid + ']';
    } else {
      // This for the create new node form.
      this.support = this.supportService.newSupportData();
      this.form_title = 'Create new support';
    }
  }

}

目前，我收到此错误：

If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Answer 1

您的select 输入缺少name 属性：

 <select [(ngModel)]="support.field_status" name="fieldStatus" class="form-control form-control-sm">