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

时间:2017-10-30 09:13:28

标签: angular

在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 }}

然而,这不起作用。默认情况下,如果选中,则为空值。

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

7 个答案:

答案 0 :(得分:43)

试试这样:

<强> 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});
    }
}

答案 1 :(得分:10)

以反应形式。绑定可以在组件文件和ngValue的使用中完成。有关详细信息,请访问以下链接

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

<?xml version="1.0" encoding="utf-8"?>
<!--
    WARNING: Parsing of this file by third-party apps is not supported. The
    file, and the font files it refers to, will be renamed and/or moved out
    from their respective location in the next Android release, and/or the
    format or syntax of the file may change significantly. You must not
    parse this file for information about system fonts. Instead, you must
    call android.text.FontManager#getSystemFonts(). For example, it can be
    called as context.getSystemService(FontManager.class).getSystemFonts().
    Note that the returned FontConfig includes data on all the defined font
    families and all the details about weight, style, etc. It also provides
    an open file descriptor to each font file. Note that callers of the API
    should ensure they close the given file descriptors once they are done
    using them.

    In this file, all fonts without names are added to the default list.
    Fonts are chosen based on a match: full BCP-47 language tag including
    script, then just language, and finally order (the first font containing
    the glyph).

    Order of appearance is also the tiebreaker for weight matching. This is
    the reason why the 900 weights of Roboto precede the 700 weights - we
    prefer the former when an 800 weight is requested. Since bold spans
    effectively add 300 to the weight, this ensures that 900 is the bold
    paired with the 500 weight, ensuring adequate contrast.
-->
<familyset version="22">
    <!-- first font is default -->
    <family name="sans-serif">
        <font weight="100" style="normal">Roboto-Thin.ttf</font>
        <font weight="100" style="italic">Roboto-ThinItalic.ttf</font>
        <font weight="300" style="normal">Roboto-Light.ttf</font>
        <font weight="300" style="italic">Roboto-LightItalic.ttf</font>
        <font weight="400" style="normal">Roboto-Regular.ttf</font>
        <font weight="400" style="italic">Roboto-Italic.ttf</font>
        <font weight="500" style="normal">Roboto-Medium.ttf</font>
        <font weight="500" style="italic">Roboto-MediumItalic.ttf</font>
        <font weight="900" style="normal">Roboto-Black.ttf</font>
        <font weight="900" style="italic">Roboto-BlackItalic.ttf</font>
        <font weight="700" style="normal">Roboto-Bold.ttf</font>
        <font weight="700" style="italic">Roboto-BoldItalic.ttf</font>
    </family>

    <!-- Note that aliases must come after the fonts they reference. -->
    <alias name="sans-serif-thin" to="sans-serif" weight="100" />
    <alias name="sans-serif-light" to="sans-serif" weight="300" />
    <alias name="sans-serif-medium" to="sans-serif" weight="500" />
    <alias name="sans-serif-black" to="sans-serif" weight="900" />
    <alias name="arial" to="sans-serif" />
    <alias name="helvetica" to="sans-serif" />
    <alias name="tahoma" to="sans-serif" />
    <alias name="verdana" to="sans-serif" />

    <family name="sans-serif-condensed">
        <font weight="300" style="normal">RobotoCondensed-Light.ttf</font>
        <font weight="300" style="italic">RobotoCondensed-LightItalic.ttf</font>
        <font weight="400" style="normal">RobotoCondensed-Regular.ttf</font>
        <font weight="400" style="italic">RobotoCondensed-Italic.ttf</font>
        <font weight="700" style="normal">RobotoCondensed-Bold.ttf</font>
        <font weight="700" style="italic">RobotoCondensed-BoldItalic.ttf</font>
    </family>
    <alias name="sans-serif-condensed-light" to="sans-serif-condensed" weight="300" />

    <family name="serif">
        <font weight="400" style="normal">NotoSerif-Regular.ttf</font>
        <font weight="700" style="normal">NotoSerif-Bold.ttf</font>
        <font weight="400" style="italic">NotoSerif-Italic.ttf</font>
        <font weight="700" style="italic">NotoSerif-BoldItalic.ttf</font>
    </family>
    <alias name="times" to="serif" />
    <alias name="times new roman" to="serif" />
    <alias name="palatino" to="serif" />
    <alias name="georgia" to="serif" />
    <alias name="baskerville" to="serif" />
    <alias name="goudy" to="serif" />
    <alias name="fantasy" to="serif" />
    <alias name="ITC Stone Serif" to="serif" />

    <family name="monospace">
        <font weight="400" style="normal">DroidSansMono.ttf</font>
    </family>
    <alias name="sans-serif-monospace" to="monospace" />
    <alias name="monaco" to="monospace" />

    <family name="serif-monospace">
        <font weight="400" style="normal">CutiveMono.ttf</font>
    </family>
    <alias name="courier" to="serif-monospace" />
    <alias name="courier new" to="serif-monospace" />

    <family name="casual">
        <font weight="400" style="normal">ComingSoon.ttf</font>
    </family>

    <family name="cursive">
        <font weight="400" style="normal">DancingScript-Regular.ttf</font>
        <font weight="700" style="normal">DancingScript-Bold.ttf</font>
    </family>

    <family name="sans-serif-smallcaps">
        <font weight="400" style="normal">CarroisGothicSC-Regular.ttf</font>
    </family>

    <!-- fallback fonts -->
    <family lang="und-Arab" variant="elegant">
        <font weight="400" style="normal">NotoNaskhArabic-Regular.ttf</font>
        <font weight="700" style="normal">NotoNaskhArabic-Bold.ttf</font>
    </family>
    <family lang="und-Arab" variant="compact">
        <font weight="400" style="normal">NotoNaskhArabicUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoNaskhArabicUI-Bold.ttf</font>
    </family>
    <family lang="und-Ethi">
        <font weight="400" style="normal">NotoSansEthiopic-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansEthiopic-Bold.ttf</font>
    </family>
    <family lang="und-Hebr">
        <font weight="400" style="normal">NotoSansHebrew-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansHebrew-Bold.ttf</font>
    </family>
    <family lang="und-Thai" variant="elegant">
        <font weight="400" style="normal">NotoSansThai-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansThai-Bold.ttf</font>
    </family>
    <family lang="und-Thai" variant="compact">
        <font weight="400" style="normal">NotoSansThaiUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansThaiUI-Bold.ttf</font>
    </family>
    <family lang="und-Armn">
        <font weight="400" style="normal">NotoSansArmenian-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansArmenian-Bold.ttf</font>
    </family>
    <!-- TODO: add Geok -->
    <family lang="und-Geor">
        <font weight="400" style="normal">NotoSansGeorgian-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansGeorgian-Bold.ttf</font>
    </family>
    <family lang="und-Deva" variant="elegant">
        <font weight="400" style="normal">NotoSansDevanagari-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansDevanagari-Bold.ttf</font>
    </family>
    <family lang="und-Deva" variant="compact">
        <font weight="400" style="normal">NotoSansDevanagariUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansDevanagariUI-Bold.ttf</font>
    </family>

    <!-- All scripts of India should come after Devanagari, due to shared
         danda characters.
    -->
    <family lang="und-Gujr" variant="elegant">
        <font weight="400" style="normal">NotoSansGujarati-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansGujarati-Bold.ttf</font>
    </family>
    <family lang="und-Gujr" variant="compact">
        <font weight="400" style="normal">NotoSansGujaratiUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansGujaratiUI-Bold.ttf</font>
    </family>
    <family lang="und-Guru" variant="elegant">
        <font weight="400" style="normal">NotoSansGurmukhi-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansGurmukhi-Bold.ttf</font>
    </family>
    <family lang="und-Guru" variant="compact">
        <font weight="400" style="normal">NotoSansGurmukhiUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansGurmukhiUI-Bold.ttf</font>
    </family>
    <family lang="und-Taml" variant="elegant">
        <font weight="400" style="normal">NotoSansTamil-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansTamil-Bold.ttf</font>
    </family>
    <family lang="und-Taml" variant="compact">
        <font weight="400" style="normal">NotoSansTamilUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansTamilUI-Bold.ttf</font>
    </family>
    <family lang="und-Mlym" variant="elegant">
        <font weight="400" style="normal">NotoSansMalayalam-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansMalayalam-Bold.ttf</font>
    </family>
    <family lang="und-Mlym" variant="compact">
        <font weight="400" style="normal">NotoSansMalayalamUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansMalayalamUI-Bold.ttf</font>
    </family>
    <family lang="und-Beng" variant="elegant">
        <font weight="400" style="normal">NotoSansBengali-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansBengali-Bold.ttf</font>
    </family>
    <family lang="und-Beng" variant="compact">
        <font weight="400" style="normal">NotoSansBengaliUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansBengaliUI-Bold.ttf</font>
    </family>
    <family lang="und-Telu" variant="elegant">
        <font weight="400" style="normal">NotoSansTelugu-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansTelugu-Bold.ttf</font>
    </family>
    <family lang="und-Telu" variant="compact">
        <font weight="400" style="normal">NotoSansTeluguUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansTeluguUI-Bold.ttf</font>
    </family>
    <family lang="und-Knda" variant="elegant">
        <font weight="400" style="normal">NotoSansKannada-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansKannada-Bold.ttf</font>
    </family>
    <family lang="und-Knda" variant="compact">
        <font weight="400" style="normal">NotoSansKannadaUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansKannadaUI-Bold.ttf</font>
    </family>
    <family lang="und-Orya" variant="elegant">
        <font weight="400" style="normal">NotoSansOriya-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansOriya-Bold.ttf</font>
    </family>
    <family lang="und-Orya" variant="compact">
        <font weight="400" style="normal">NotoSansOriyaUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansOriyaUI-Bold.ttf</font>
    </family>

    <family lang="und-Sinh">
        <font weight="400" style="normal">NotoSansSinhala-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansSinhala-Bold.ttf</font>
    </family>
    <family lang="und-Khmr" variant="elegant">
        <font weight="400" style="normal">NotoSansKhmer-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansKhmer-Bold.ttf</font>
    </family>
    <family lang="und-Khmr" variant="compact">
        <font weight="400" style="normal">NotoSansKhmerUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansKhmerUI-Bold.ttf</font>
    </family>
    <family lang="und-Laoo" variant="elegant">
        <font weight="400" style="normal">NotoSansLao-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansLao-Bold.ttf</font>
    </family>
    <family lang="und-Laoo" variant="compact">
        <font weight="400" style="normal">NotoSansLaoUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansLaoUI-Bold.ttf</font>
    </family>
    <family lang="und-Mymr" variant="elegant">
        <font weight="400" style="normal">NotoSansMyanmar-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansMyanmar-Bold.ttf</font>
    </family>
    <family lang="und-Mymr" variant="compact">
        <font weight="400" style="normal">NotoSansMyanmarUI-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansMyanmarUI-Bold.ttf</font>
    </family>
    <family lang="und-Thaa">
        <font weight="400" style="normal">NotoSansThaana-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansThaana-Bold.ttf</font>
    </family>
    <family lang="und-Cham">
        <font weight="400" style="normal">NotoSansCham-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansCham-Bold.ttf</font>
    </family>
    <family lang="und-Avst">
        <font weight="400" style="normal">NotoSansAvestan-Regular.ttf</font>
    </family>
    <family lang="und-Bali">
        <font weight="400" style="normal">NotoSansBalinese-Regular.ttf</font>
    </family>
    <family lang="und-Bamu">
        <font weight="400" style="normal">NotoSansBamum-Regular.ttf</font>
    </family>
    <family lang="und-Batk">
        <font weight="400" style="normal">NotoSansBatak-Regular.ttf</font>
    </family>
    <family lang="und-Brah">
        <font weight="400" style="normal">NotoSansBrahmi-Regular.ttf</font>
    </family>
    <family lang="und-Bugi">
        <font weight="400" style="normal">NotoSansBuginese-Regular.ttf</font>
    </family>
    <family lang="und-Buhd">
        <font weight="400" style="normal">NotoSansBuhid-Regular.ttf</font>
    </family>
    <family lang="und-Cans">
        <font weight="400" style="normal">NotoSansCanadianAboriginal-Regular.ttf</font>
    </family>
    <family lang="und-Cari">
        <font weight="400" style="normal">NotoSansCarian-Regular.ttf</font>
    </family>
    <family lang="und-Cher">
        <font weight="400" style="normal">NotoSansCherokee-Regular.ttf</font>
    </family>
    <family lang="und-Copt">
        <font weight="400" style="normal">NotoSansCoptic-Regular.ttf</font>
    </family>
    <family lang="und-Xsux">
        <font weight="400" style="normal">NotoSansCuneiform-Regular.ttf</font>
    </family>
    <family lang="und-Cprt">
        <font weight="400" style="normal">NotoSansCypriot-Regular.ttf</font>
    </family>
    <family lang="und-Dsrt">
        <font weight="400" style="normal">NotoSansDeseret-Regular.ttf</font>
    </family>
    <family lang="und-Egyp">
        <font weight="400" style="normal">NotoSansEgyptianHieroglyphs-Regular.ttf</font>
    </family>
    <family lang="und-Glag">
        <font weight="400" style="normal">NotoSansGlagolitic-Regular.ttf</font>
    </family>
    <family lang="und-Goth">
        <font weight="400" style="normal">NotoSansGothic-Regular.ttf</font>
    </family>
    <family lang="und-Hano">
        <font weight="400" style="normal">NotoSansHanunoo-Regular.ttf</font>
    </family>
    <family lang="und-Armi">
        <font weight="400" style="normal">NotoSansImperialAramaic-Regular.ttf</font>
    </family>
    <family lang="und-Phli">
        <font weight="400" style="normal">NotoSansInscriptionalPahlavi-Regular.ttf</font>
    </family>
    <family lang="und-Prti">
        <font weight="400" style="normal">NotoSansInscriptionalParthian-Regular.ttf</font>
    </family>
    <family lang="und-Java">
        <font weight="400" style="normal">NotoSansJavanese-Regular.ttf</font>
    </family>
    <family lang="und-Kthi">
        <font weight="400" style="normal">NotoSansKaithi-Regular.ttf</font>
    </family>
    <family lang="und-Kali">
        <font weight="400" style="normal">NotoSansKayahLi-Regular.ttf</font>
    </family>
    <family lang="und-Khar">
        <font weight="400" style="normal">NotoSansKharoshthi-Regular.ttf</font>
    </family>
    <family lang="und-Lepc">
        <font weight="400" style="normal">NotoSansLepcha-Regular.ttf</font>
    </family>
    <family lang="und-Limb">
        <font weight="400" style="normal">NotoSansLimbu-Regular.ttf</font>
    </family>
    <family lang="und-Linb">
        <font weight="400" style="normal">NotoSansLinearB-Regular.ttf</font>
    </family>
    <family lang="und-Lisu">
        <font weight="400" style="normal">NotoSansLisu-Regular.ttf</font>
    </family>
    <family lang="und-Lyci">
        <font weight="400" style="normal">NotoSansLycian-Regular.ttf</font>
    </family>
    <family lang="und-Lydi">
        <font weight="400" style="normal">NotoSansLydian-Regular.ttf</font>
    </family>
    <family lang="und-Mand">
        <font weight="400" style="normal">NotoSansMandaic-Regular.ttf</font>
    </family>
    <family lang="und-Mtei">
        <font weight="400" style="normal">NotoSansMeeteiMayek-Regular.ttf</font>
    </family>
    <family lang="und-Talu">
        <font weight="400" style="normal">NotoSansNewTaiLue-Regular.ttf</font>
    </family>
    <family lang="und-Nkoo">
        <font weight="400" style="normal">NotoSansNKo-Regular.ttf</font>
    </family>
    <family lang="und-Ogam">
        <font weight="400" style="normal">NotoSansOgham-Regular.ttf</font>
    </family>
    <family lang="und-Olck">
        <font weight="400" style="normal">NotoSansOlChiki-Regular.ttf</font>
    </family>
    <family lang="und-Ital">
        <font weight="400" style="normal">NotoSansOldItalic-Regular.ttf</font>
    </family>
    <family lang="und-Xpeo">
        <font weight="400" style="normal">NotoSansOldPersian-Regular.ttf</font>
    </family>
    <family lang="und-Sarb">
        <font weight="400" style="normal">NotoSansOldSouthArabian-Regular.ttf</font>
    </family>
    <family lang="und-Orkh">
        <font weight="400" style="normal">NotoSansOldTurkic-Regular.ttf</font>
    </family>
    <family lang="und-Osma">
        <font weight="400" style="normal">NotoSansOsmanya-Regular.ttf</font>
    </family>
    <family lang="und-Phag">
        <font weight="400" style="normal">NotoSansPhagsPa-Regular.ttf</font>
    </family>
    <family lang="und-Phnx">
        <font weight="400" style="normal">NotoSansPhoenician-Regular.ttf</font>
    </family>
    <family lang="und-Rjng">
        <font weight="400" style="normal">NotoSansRejang-Regular.ttf</font>
    </family>
    <family lang="und-Runr">
        <font weight="400" style="normal">NotoSansRunic-Regular.ttf</font>
    </family>
    <family lang="und-Samr">
        <font weight="400" style="normal">NotoSansSamaritan-Regular.ttf</font>
    </family>
    <family lang="und-Saur">
        <font weight="400" style="normal">NotoSansSaurashtra-Regular.ttf</font>
    </family>
    <family lang="und-Shaw">
        <font weight="400" style="normal">NotoSansShavian-Regular.ttf</font>
    </family>
    <family lang="und-Sund">
        <font weight="400" style="normal">NotoSansSundanese-Regular.ttf</font>
    </family>
    <family lang="und-Sylo">
        <font weight="400" style="normal">NotoSansSylotiNagri-Regular.ttf</font>
    </family>
    <!-- Esrangela should precede Eastern and Western Syriac, since it's our default form. -->
    <family lang="und-Syre">
        <font weight="400" style="normal">NotoSansSyriacEstrangela-Regular.ttf</font>
    </family>
    <family lang="und-Syrn">
        <font weight="400" style="normal">NotoSansSyriacEastern-Regular.ttf</font>
    </family>
    <family lang="und-Syrj">
        <font weight="400" style="normal">NotoSansSyriacWestern-Regular.ttf</font>
    </family>
    <family lang="und-Tglg">
        <font weight="400" style="normal">NotoSansTagalog-Regular.ttf</font>
    </family>
    <family lang="und-Tagb">
        <font weight="400" style="normal">NotoSansTagbanwa-Regular.ttf</font>
    </family>
    <family lang="und-Lana">
        <font weight="400" style="normal">NotoSansTaiTham-Regular.ttf</font>
    </family>
    <family lang="und-Tavt">
        <font weight="400" style="normal">NotoSansTaiViet-Regular.ttf</font>
    </family>
    <family lang="und-Tibt">
        <font weight="400" style="normal">NotoSansTibetan-Regular.ttf</font>
        <font weight="700" style="normal">NotoSansTibetan-Bold.ttf</font>
    </family>
    <family lang="und-Tfng">
        <font weight="400" style="normal">NotoSansTifinagh-Regular.ttf</font>
    </family>
    <family lang="und-Ugar">
        <font weight="400" style="normal">NotoSansUgaritic-Regular.ttf</font>
    </family>
    <family lang="und-Vaii">
        <font weight="400" style="normal">NotoSansVai-Regular.ttf</font>
    </family>
    <family lang="und-Yiii">
        <font weight="400" style="normal">NotoSansYi-Regular.ttf</font>
    </family>
    <family>
        <font weight="400" style="normal">NotoSansSymbols-Regular-Subsetted.ttf</font>
    </family>
    <family lang="zh-Hans">
        <font weight="400" style="normal" index="2">NotoSansCJK-Regular.ttc</font>
    </family>
    <!-- TODO: Add Bopo -->
    <family lang="zh-Hant">
        <font weight="400" style="normal" index="3">NotoSansCJK-Regular.ttc</font>
    </family>
    <family lang="ja">
        <font weight="400" style="normal" index="0">NotoSansCJK-Regular.ttc</font>
    </family>
    <family lang="ko">
        <font weight="400" style="normal" index="1">NotoSansCJK-Regular.ttc</font>
    </family>
    <family lang="und-Zsye">
        <font weight="400" style="normal">NotoColorEmoji.ttf</font>
    </family>
    <family lang="und-Zsym">
        <font weight="400" style="normal">NotoSansSymbols-Regular-Subsetted2.ttf</font>
    </family>
    <!--
        Tai Le and Mongolian are intentionally kept last, to make sure they don't override
        the East Asian punctuation for Chinese.
    -->
    <family lang="und-Tale">
        <font weight="400" style="normal">NotoSansTaiLe-Regular.ttf</font>
    </family>
    <family lang="und-Mong">
        <font weight="400" style="normal">NotoSansMongolian-Regular.ttf</font>
    </family>
</familyset>

答案 2 :(得分:5)

在您的组件中 -

确保使用值初始化formControl名称国家/地区

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

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

并尝试将 [值] 替换为 [ngValue]

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

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

答案 3 :(得分:4)

您必须创建一个新属性(例如: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 link

答案 4 :(得分:1)

我很努力,并从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接受字符串,因为您已经将其分配为字符串。

答案 5 :(得分:0)

您可以使用修补程序功能通过表单组中的某些值设置默认值。

component.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 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
    });

  }

答案 6 :(得分:0)

作为选择,如果您仅需要下拉菜单中的默认文本而没有默认值,请尝试添加<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中工作正常。