如何以基于Angular2模型的形式从API填充下拉列表默认值_Angular_Typescript_Dropdown

如何以基于Angular2模型的形式从API填充下拉列表默认值

angular typescript

如何以基于Angular2模型的形式从API填充下拉列表默认值,angular,typescript,dropdown,Angular,Typescript,Dropdown,我试图在Angular2中创建一个基于模型的表单，其中包括从数据库中拉入的几个下拉列表，然后将所选值绑定到表单。如果表单是从以前保存的表单编辑的，我需要能够初始化下拉列表值。我似乎找不到任何直接的例子，只有将选定的值绑定到全新形式的例子。以下是我到目前为止的情况：组成部分： import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/rout

我试图在Angular2中创建一个基于模型的表单，其中包括从数据库中拉入的几个下拉列表，然后将所选值绑定到表单。如果表单是从以前保存的表单编辑的，我需要能够初始化下拉列表值。我似乎找不到任何直接的例子，只有将选定的值绑定到全新形式的例子。以下是我到目前为止的情况：

组成部分：

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { Http } from '@angular/http';
import { FormGroup, FormArray, FormControl, Validators, FormBuilder } from '@angular/forms';
import 'rxjs/add/operator/switchMap';

import { Part } from '../../models/part';
import { Series } from '../../models/series';

import { PartsService } from '../../services/parts.service';
import { SeriesService } from '../../services/series.service';

@Component({
selector: 'parts',
styleUrls: ['../../../styles/main.css'],
templateUrl: './partsForm.component.html',
providers: [PartsService, SeriesService]
})

export class PartsFormComponent implements OnInit{
@Input() part: Part;
selectedPart: Part;
partsForm: FormGroup;
partName = new FormControl();
series: Series;
seriesList: Series[];
seriesSearch: string;
selectedSeries: Series = new Series();
isEdit: boolean;
selected: any;




constructor(
    private partsService: PartsService,
    private seriesService: SeriesService,
    private route: ActivatedRoute,
    private location: Location,
    fb: FormBuilder
    ) {
    this.partsForm = fb.group({
        partName: new FormControl(''),
        partLength: new FormControl(''),
        seriesId: new FormControl(''),
});
}

ngOnInit(): void {
    let partId: string;

    this.route.params
        .subscribe((params: Params) => partId = params['id']);

    this.isEdit = (partId != undefined && partId.substring(0, 1) !== "T");

    if (this.isEdit) {
        this.partsService.getPartById(+partId).subscribe(part => this.part = part);
    }  else {
        this.part = new Part;
    }

    this.getSeriesList();
}

intializePartForm() {
    this.series.seriesId = this.part.seriesId;

}

getSeriesList() {
    this.seriesService.getAllSeries().subscribe(data => this.seriesList = data);
}

saveNew() {
    this.part.partId = 0;
    this.savePart();
}

savePart() {
    this.part.seriesId = this.selectedSeries.seriesId;

    this.partsService.savePart(this.part).subscribe(data => this.part = data);
}
}

HTML模板：

<form  *ngIf="part" [formGroup]="partsForm" (ngSubmit)="onSubmit()" >
    <div class="col-lg-6">        
        <div class="form-group" >
            <label>Part Name</label>
            <input type="text" class="form-control"  formControlName="partName" placeholder="Part Name" [value]="part.partName" [disabled]="isEdit">
        </div>
        <div class="form-group" >
            <label>Series</label>
            <select class="form-control" formControlName="series"> 
                <option *ngFor="let series of seriesList" [selected]="series.seriesId == part.seriesId" >{{series.seriesName}}</option>
            </select>
        </div>
        <div class="form-group">
            <label>Part Length</label>
            <input type="number" class="form-control"  formControlName="partLength" placeholder="Part Length" >
        </div>
        <div *ngIf="!isEdit">
            <button type="submit" class="btn btn-success" (click)="saveNew()" >Save As New</button>
        </div>
        <div *ngIf="isEdit">
            <button type="submit" class="btn btn-success" (click)="savePart()" >Save Changes</button>
        </div>
    </div>
</form>

部分

在反应式表单中，类似于

[selected]

和

[disabled]

的操作不起作用，您需要使用

patchValue

（或

setValue

）并以另一种方式切换启用和禁用字段

收到所需的所有数据后，用所需内容修补表单值。例如，在获取列表的值后，调用一个函数来设置这些值，这里名为

patchForm（）

：

设置默认值的函数可以如下所示。您只需应用所需的逻辑，而不是以下值

patchForm() {
  this.partsForm.patchValue({
    partName: this.part.partName
    series: this.seriesList[1].seriesName
  })  
}

如前所述，

[disabled]

在表单中不起作用（就像您正在尝试

partName

表单控件），您需要以另一种方式切换启用和禁用。这可以通过以下方法实现：

toggleDisableEnable() {
  let control = this.partsForm.get('partName')
  control.enabled ? control.disable() : control.enable();
}

最后，一个

…修补以帮助您使用表单：）您需要自行设置的patchValue中的一些逻辑，刚才为您提供了一个示例，说明如何执行此操作，以及字段的禁用和启用。

在反应式表单中，像

[selected]

和

[disabled]

之类的操作不起作用，您需要使用

patchValue

（或

setValue