Question

我有几个来自数据库的值，我想将其中一个值设置为下拉表单元素的默认值，尝试了很多方法但无法解决问题

my.ts：

phoneTypes;

defaultValue;

ngOnInit() {
  this.getPhoneTypes();
}

getPhoneTypes() {
  this.myService.getPhoneTypes().subscribe(data=>{
    this.phoneTypes= data;
  });
}

defaultValue = this.phoneTypes.name;

initForm() {
  phoneType : new FormControl()
}

my.html

<div id = "someId">
 <select formControlName="phoneType" [(ngModel)]="defaultValue">
   <option *ngFor="let phoneType of phoneTypes" [value]="phoneType.code" >{{phoneType.name}}</option>
 </select> 
</div>

但是我看到默认值是绑定的，我看不到默认值即将到来。

Answer 1

好答案已经发布。在这里，我发布了一个通用的解决方案，用于在反应形式场景中的选择（下拉）中选择默认值。

假设您有一个模型类水果，并且该类的数组是通过服务器返回的。为了模拟这种情况，我使用“ of ” rxjs运算符创建了一个可观察对象。

import {from, of} from 'rxjs';
export class Fruit{
  public Id : number;
  public title : string;
}

  export const fruits=of([
    {Id:1, title:'Apple'},
    {Id:2, title:'Banana'},
    {Id:3, title:'Orange'},
    {Id:4, title:'Pineapple'},
    {Id:5, title:'Strawberry'}
  ]);

现在，在预订了可观察到的水果数组的组件的onInit生命周期事件中，我使用formControl的“ setValue ”方法设置默认值。

  ngOnInit(){
    this.formGroup=new FormGroup({
      fruit:new FormControl(null)
    });

    fruits.subscribe(response=>{
      this.fruitsArr = response;

      this.formGroup.controls['fruit'].setValue(this.fruitsArr[2]);
    });
  }

请注意，通过在下面的行中编写，我正在选择FruitsArr的第三个元素作为选择（下拉）的默认选定项。

this.formGroup.controls['fruit'].setValue(this.fruitsArr[2]);

这是html

<form [formGroup]="formGroup">
<select id="fruit" formControlName="fruit">
  <option *ngFor="let item of fruitsArr" [ngValue]="item">{{item.title}}</option>
</select>
</form>

这是工作中的stackblitz 。

Answer 2

如上述评论中@ AJT_82所建议，我删除了[[ngModel）]属性并使用setVale进行填充：

<div id = "someId">
 <select formControlName="phoneType">
   <option *ngFor="let phoneType of phoneTypes" [value]="phoneType.code" >{{phoneType.name}}</option>
 </select> 
</div>

在my.ts文件中

电话在这里是一个表单组

const phones = this.myForm.get('phones') as FormArray;
        phones.at(0).get('phoneType').setValue('Apple');

Answer 3

要动态设置默认值，我使用了{strong> @ rxweb / reactive-form-validators 中的FormBuilderConfiguration，可以在其中设置{{1 }}的动态动态

您需要在应用程序模块中导入defaultValue

这是完整的组件代码：

ReactiveFormsModule

import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"
import { RxFormBuilder,FormBuilderConfiguration } from '@rxweb/reactive-form-validators';

import { User } from './user.model';

@Component({
    selector: 'app-phone-add',
    templateUrl: './phone.component.html'
})
export class phoneComponent implements OnInit {
    userFormGroup: FormGroup
      phoneTypes = [ "Type1","Type2"];

    constructor(
        private formBuilder: RxFormBuilder    ) { }

    ngOnInit() {
        let user = new User();
      var formBuilderConfig = new FormBuilderConfiguration();
        formBuilderConfig.propsConfig = {'phoneType': 
          {defaultValue:this.phoneTypes[0]}}
         this.userFormGroup = this.formBuilder.formGroup(user,formBuilderConfig);
    }
}

这里是working example

如何将默认动态值设置为下拉

3 个答案: