Question

我正在使用反应形式，并且有一个来自对象数组的选择框。我尝试设置默认值，但没有设置。

我的表单：

<form [formGroup]="markerForm" (ngSubmit)="onSubmit(markerForm)" novalidate>
      <div class="form-group">
        <label for="markerType">{{ 'MARKER.LABEL_TYPE' | translate }}</label>
        <select  class="form-control" formControlName="markerType"   >
           <option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>
        </select>
      </div>
</form>

设置默认值：

const test= [{id:1, desc: 'Restaurants'}, {id:2, desc : 'Fire stations'}];
this.markerTypes= test;
console.log(this.markerTypes[1].desc);
this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

Answer 1

发生问题是因为您使用markerType.id作为值，但默认发送了整个对象this.markerTypes[1]。在这种情况下，您应该通过this.markerTypes[1].id。

如果要将对象用作值，则应在选项标签上使用ngValue指令：

<option id="markerType" [ngValue]="markerType" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

这是因为unlike the value binding, ngValue supports binding to objects

请参见工作示例here

Answer 2

尝试一下

选中此https://stackblitz.com/edit/angular-rqhchz?embed=1

Component.html

function documentLoaded(doc){
    viewables = avd.getSubItemsWithProperties(doc.getRootItem(), {'type': 'geometry'}, true);
    if (viewables.length === 0) return;
    var initialViewable = viewables[0];
    var svfUrl = doc.getViewablePath(initialViewable);
    var modelOptions = { sharedPropertyDbPath: doc.getPropertyDbPath()
        ,globalOffset: {x:0, y:0, z:0}
        ,applyRefPoint: true 
    };
    viewer.loadModel(svfUrl, modelOptions, onLoadModelSuccess); // this one aggrerates a model
    //viewer.loadDocumentNode(doc, initialViewable,modelOptions ); // this one changes the model
}

component.ts

<form [formGroup]="markerForm">
   <select id="country" formControlName="markerType">
       <option *ngFor="let c of markerTypes" [ngValue]="c.id">{{ c.desc }} 
      </option>
   </select>
</form>

希望这会有所帮助

Answer 3

您正在将默认值设置为对象：

this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

您是说您的值是一个id：

 <option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

您在这里有多种选择，这取决于您希望表单值如何显示。

使用ID：

this.markerForm.controls['markerType'].setValue( this.markerTypes[1].id, {onlySelf: true});

<option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

使用Desc：

this.markerForm.controls['markerType'].setValue( this.markerTypes[1].desc, {onlySelf: true});

<option id="markerType" [value]="markerType.desc" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

使用对象

在这种情况下，您必须使用[ngValue]，[value]仅用于类型字符串变量。

this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

<option id="markerType" [value]="markerType" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>

Working Example

角反应形式选择默认对象

3 个答案: