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