2016-12-09 9 views
1

私は選択リストオプションを追加する必要があるフォームを持っていますが、HTMLを正しく記述する方法はわかりません。角2選択リストフォームで[(ngModel)]を使用する方法

選択した値が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. 

答えて

2

あなたのためにname属性がありません。select i nput:

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

はい、これは必須です。 Angular 5の文書(https://angular.io/guide/forms)から:「[(ngModel)]をフォームと組み合わせて使用​​する場合は、名前属性を定義する必要があります。 – elshev

関連する問題