Angular 4のReactiveフォームを使用してngOnInitでドロップダウンのデフォルト選択値を取得する方法

Question

私は選択ドロップダウンリストを持っています。ページが読み込まれると、デフォルトでオプションが選択されます。私はngOnInit()の間にデフォルト値を取得したいと思います。ただし、空の値が返されます。

HTML

get segmentOne() { return this.myForm.get('segmentOne'); } 

ngOnInit() { 
    console.log(this.segmentOne.value); 
    // returns empty string "" 
} 

Answer 1

これは通常、コード

segmentForm: FormGroup; 
    segmentsForAnalysis = [ 
    {name: 'one', value: 1}, 
    {name: 'two', value: 2}, 
    {name: 'three', value: 3}]; 
    constructor() {} 

    ngOnInit() 
    { 

    this.segmentForm = new FormGroup({ 
     'segmentOne': new FormControl(this.segmentsForAnalysis[0].value) //<--- 
    }); 

    } 

のtypescriptです部分で行われます。あなたはあなたの選択値を与えたい場合は、あなたのフォームをインスタンス化するとき

、あなたはそれを行います

そしてHTML部分に

<form [formGroup]="segmentForm" (ngSubmit)="onSubmit()"> 
    <select (change)="segmentOneSelected()" formControlName="segmentOne" class="form-control segment-1"> 
    <option *ngFor="let segment of segmentsForAnalysis" [value]="segment.value" >{{segment.name}}</option> 
    </select> 
</form> 

Answer 2

選択した属性は角では動作しません

<select (change)="segmentOneSelected()" formControlName="segmentOne" class="form-control segment-1"> 
    <option [attr.value]="-1">Select</option> 
    <option *ngFor="let segment of segmentsForAnalysis" [attr.value]="segment.index" [attr.selected]="segment.name == 2 ? true : null">{{segment.name}}</option> 
</select> 

コンポーネント。反応形式については

segmentsForAnalysis = [ 
    { index: 0, name: 'Segment 1' }, 
    { index: 1, name: 'Segment 2' }, 
] 

this.myForm = this.formBuilder.group({ 
    segmentOne: [this.segmentsForAnalysis[1].name, [/* Validators */]] 
}) 

Answer 3

アクセス使用形態は

0を制御します

ngOnInit(){ 
console.log(this.myForm.controls['segmentOne'].value); 
} 

Checkout Plunkr: https://plnkr.co/edit/bRufrZ?p=preview

Answer 4

あなたはコンボボックスに予め選択された値を持っているしたい場合は、フォームのコントロールに値を設定する必要があります。例えば、

this.segmentFormGroup = this.formBuilder.group({ 
    segmentOne: ['pre-selected-value', [Validators.required]] 
}); 

そこであなたは「事前に選択された値にあらかじめ選択された値を設定します、あなたのようにフォームのグループを初期化する）（あなたのngOnInitで

private segmentFormGroup: FormGroup; 

：あなたは、としてフォーム・グループを定義しています'ただし、オプションリストには「pre-selected-value」という値を設定する必要があります。あなたには、いくつかのロジックに基づいて）動的ngOnInit（で予め選択された値を設定する必要がある場合、以下に示すよう

あるいは、あなたが値を設定するformGroupのpatchValue（）メソッドを使用することができます：

this.segmentFormGroup.patchValue({ 
    'segmentOne': 'pre-selected-value' 
}); 

最後に、選択した値を取得する場合は、次のスニペットを使用できます。

let selectedValue = this.segmentFormGroup.get('segmentOne').value;