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

试试这样:

componen.html

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

component.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

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 4

在你的组件中 -

确保使用值初始化formControl名称country.

例如:假设您的表单组名称是myForm,_fb是FormBuilder实例,那么,

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

并且还尝试更换[值]与[ngValue] .

编辑1:如果在声明时无法初始化值,则在具有此值时设置值.

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