Angular 4 - Wählen Sie den Standardwert im Dropdown [Reaktive Formulare]

Question

In Angular 4, habe ich die folgende Konfiguration in einer JSON-Konfigurationsdatei definiert.

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

Ich muss diese in einem Dropdown-Menü mit Reactive-Modul anzeigen.

Hier ist der Code dieses (ts) zu tun

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> 

Dies macht den Job und zeigt die Länder in einem Dropdown. Ich muss jedoch auch standardmäßig ein Land auswählen, und das Standardland stammt aus dem in json definierten Standardschlüssel.

Also habe ich versucht, so etwas wie dieses

tun {{c}}

Dies ist jedoch nicht funktioniert. Standardmäßig ein leerer Wert, falls ausgewählt.

Wie kann ich sicherstellen, dass ein vordefinierter Wert standardmäßig ausgewählt ist?

Answer 1

wie diese versuchen:

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

Sie müssen eine neue Eigenschaft erstellen (zB: selectedCountry) und sie in [(ngModel)] verwenden und in der Komponentendatei den Wert default zuweisen.

In your_component_file.ts

this.selectedCountry = default; 

In 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

In Ihrer Komponente -

Sicherstellen, dass der Formcontrol Namen Land mit einem Wert initialisieren.

Zum Beispiel: Unter der Annahme, dass das Formular Gruppenname ist myForm und _fb ist Formbuilder Beispiel dann,

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

und versuchen auch [Wert] mit [ngValue] ersetzen.

EDIT 1: Wenn Sie den Wert beim Deklarieren nicht initialisieren können, dann setzen Sie den Wert, wenn Sie den Wert wie folgt haben.

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

Answer 4

In reaktiven Formen. Die Bindung kann in der Komponentendatei und der Verwendung von ngValue erfolgen. Weitere Details

über den folgenden Link gehen Sie bitte

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]), 
    }); 
}