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

Posted 2023-03-13

【中文标题】Angular 2 如何在选择列表表单中使用 [(ngModel)]

【英文标题】：Angular 2 how to use [(ngModel)] in a select list form

【发布时间】：2017-04-25 03:07:30

【问题描述】：

我有一个表单，我需要在其中添加一个选择列表选项，但我真的不知道如何正确编写 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.

【参考方案1】：

您的select 输入缺少name 属性：

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

【讨论】：

是的，这是一个要求。来自 Angular 5 文档 (angular.io/guide/forms)：“在将 [(ngModel)] 与表单结合使用时，需要定义名称属性。”