我有一个主要组件,我在另一个组件中使用tag-input
下拉列表,但当我提交表单tag-input
所选项目未正确提交时,只有最后一个选定项目的一个字符已发布。
main component:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form #myForm="ngForm" novalidate>
<nationality name="nationalities" ngModel ngDefaultControl></nationality>
<button type="button" (click)="create(myForm)" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
在其组件类中,我有一个名为create
的函数,该函数正常工作。
现在贝娄是nationality
组件:
import { Component, Input } from '@angular/core';
import { Http } from '@angular/http';
import { NgForm, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'nationality',
template: `
<label class="form-control-label" for="nationalities">Nationality</label>
<tag-input ngModel id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
<tag-input-dropdown [autocompleteItems]="nationalities">
</tag-input-dropdown>
</tag-input>
`
})
export class NationalityComponent {
private tempNationalities;
private nationalities = [];
@Input() job;
constructor(private _http: Http) {
this._http.get('/api/nationalities')
.subscribe((res)=>{
this.tempNationalities = res.json();
for (let k in this.tempNationalities) {
this.nationalities.push(this.tempNationalities[k]['name_en']);
}
});
}
}
答案 0 :(得分:0)
尝试以下代码..
<select id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" name="nationalities" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true"[(ngModel)]="selectedValue">
<option *ngFor="let nation of nationalities">{{nation}}</option>
</select>
或
<tag-input [(ngModel)]="selectedValue" id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
<tag-input-dropdown [autocompleteItems]="nationalities">
</tag-input-dropdown>
现在访问你的打字稿类中的selectedValue