Angular 4 - 在下拉列表中选择默认值 [Reactive Forms]

Question

在 Angular 4 中，我在 json 配置文件中定义了以下配置。

 countries: ['USA', 'UK', 'Canada'];
 default: 'UK'

我需要使用 Reactive 模块在下拉列表中显示这些。

这是执行此操作的代码（ts）

countries: string[] = [];
default: string;
...
this.countries = config.countries;
this.default = config.default;

html

<select id="country" formControlName="country"  >
 <option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select> 

这可以完成工作并在下拉列表中显示国家/地区。 但是，我还需要默认选择一个国家/地区，默认国家/地区来自 json 中定义的“默认”键。

所以，我尝试做这样的事情

{{ c }}

但是，这不起作用。 默认情况下，如果选中，则为空值。

如何确保默认选择预定义值？

Answer 1

像这样尝试：

组件.html

<form [formGroup]="countryForm">
    <select id="country" formControlName="country">
        <option *ngFor="let c of countries" [ngValue]="c">{{ c }}</option>
    </select>
</form>

组件.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class Component {

    countries: string[] = ['USA', 'UK', 'Canada'];
    default: string = 'UK';

    countryForm: FormGroup;

    constructor() {
        this.countryForm = new FormGroup({
            country: new FormControl(null);
        });
        this.countryForm.controls['country'].setValue(this.default, {onlySelf: true});
    }
}

Answer 2

以反应形式。 绑定可以在组件文件和ngValue的使用中完成。 欲知更多详情，请浏览以下链接

https://angular.io/api/forms/SelectControlValueAccessor

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <select formControlName="state">
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.abbrev }}
        </option>
      </select>
    </form>

       <p>Form value: {{ form.value | json }}</p> 
       <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
    `,
})
export class ReactiveSelectComp {
  states = [
    {name: 'Arizona', abbrev: 'AZ'},
    {name: 'California', abbrev: 'CA'},
    {name: 'Colorado', abbrev: 'CO'},
    {name: 'New York', abbrev: 'NY'},
    {name: 'Pennsylvania', abbrev: 'PA'},
  ];

  form = new FormGroup({
    state: new FormControl(this.states[3]),
  });
}

Answer 3

在您的组件中 -

确保用一个值初始化 formControl 名称country 。

例如：假设您的表单组名称是myForm并且_fb是 FormBuilder 实例，那么，

....
this.myForm = this._fb.group({
  country:[this.default]
})

并尝试用[ngValue]替换[value ] 。

编辑 1 ：如果您在声明时无法初始化该值，则在您拥有这样的值时设置该值。

this.myForm.controls.country.controls.setValue(this.country) 

Answer 4

我很挣扎，并从IntelliJ IDEA建议中找到了这种简单有效的方法

<select id="country" formControlName="country"  >
  <option [defaultSelected]=true [value]="default" >{{default}}</option>
  <option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select> 

并在您的 ts 文件上分配值

 countries = ['USA', 'UK', 'Canada'];
 default = 'UK'

只需确保您的 formControlName 接受字符串，因为您已经将其指定为字符串。

Answer 5

您必须创建一个新属性（例如：selectedCountry）并且应该在[(ngModel)]使用它，并进一步在组件文件中为其分配default值。

在 your_component_file.ts

this.selectedCountry = default;

在 your_component_template.html

<select id="country" formControlName="country" [(ngModel)]="selectedCountry">
 <option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select> 

Plunker 链接

Answer 6

作为选项，如果您只需要没有默认值的下拉列表中的默认文本，请尝试添加<option disabled value="null">default text here</option>如下所示：

<select id="country" formControlName="country">
 <option disabled value="null">default text here</option>
 <option *ngFor="let c of countries" [value]="c" >{{ c }}</option>
</select>

在 Chrome 和 Firefox 中工作正常。

Answer 7

您可以使用 patch 功能为表单组中的某些值设置默认值。

组件.html

<form [formGroup]="countryForm">
    <select id="country" formControlName="country">
        <option *ngFor="let c of countries" [ngValue]="c">{{ c }}</option>
    </select>
</form>

组件.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class Component implements OnInit{

    countries: string[] = ['USA', 'UK', 'Canada'];
    default: string = 'UK';

    countryForm: FormGroup;

    constructor() {

        this.countryForm.controls['country'].setValue(this.default, {onlySelf: true});
    }
}

ngOnInit() {
    this.countryForm = new FormGroup({
      'country': new FormControl(null)
    }); 

    this.countryForm.patchValue({
      'country': default
    });

  }