角度4 - ドロップダウンでデフォルト値を選択[反応形式]

Question

角度4では、以下の設定がjson設定ファイルで定義されています。

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

リアクティブモジュールを使用してこれらをドロップダウンに表示する必要があります。ここで

は、この（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で定義されている 'default'キーから来ています。

だから、私はしかし、これは動作しません。この

{{C}}

のようなものをやってみました。デフォルトでは、選択されている場合は空の値です。

既定で既定値が選択されていることを確認するにはどうすればよいですか？

Answer 1

で

your_component_file.tsで

this.selectedCountry = default; 

このようにしてみてください。

componen.html

0123を

<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

新しいプロパティ（例：selectedCountry）を作成する必要があります。[(ngModel)]で使用し、さらにコンポーネントファイルにdefaultという値を割り当ててください。 your_component_template.html

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

Plunker link

Answer 3

-

値でformControl名国を初期化することを確認します。例えば

： フォームのグループ名があるmyFormと _fb であると仮定するとは、そのインスタンスFormBuilder

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

であり、また [ngValue]をで[値]を交換してみてください。

EDIT 1：宣言時に値を初期化できない場合は、このような値があるときに値を設定します。

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

Answer 4

反応性のあるフォーム。バインディングは、コンポーネントファイルと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]), 
    }); 
}