blocks|key|548533|text|您必须创建一个新属性(例如:selectedCountry)，并且应该在[(ngModel)]中使用它，并在组件文件中进一步使用它，将default值赋给它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|548534|在your_component_file.ts中|548535|this.selectedCountry+=+default;|code-block|syntax|javascript|548536|在your_component_template.html中|548537|<select+id="country"+formControlName="country"+[(ngModel)]="selectedCountry">
+<option+*ngFor="let+c+of+countries"+[value]="c"+>{{+c+}}</option>
</select>+|548538|柱塞连杆|548539|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/XRr0eHevenilxejNwDEx?p=preview^0|10|B|1V|7|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>You have to create a new property (ex:selectedCountry)  and should use it in <code>[(ngModel)]</code> and further in component file assign <code>default</code> value to it.</p>

<p>In your_component_file.ts</p>

<pre><code>this.selectedCountry = default;
</code></pre>

<p>In your_component_template.html</p>

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

<p><a href="https://plnkr.co/edit/XRr0eHevenilxejNwDEx?p=preview" rel="nofollow noreferrer">Plunker link</a></p>


blocks|key|2182177|text|就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2182178|component.html|offset|length|style|BOLD|2182179|<form+[formGroup]="countryForm">
++++<select+id="country"+formControlName="country">
++++++++<option+*ngFor="let+c+of+countries"+[ngValue]="c">{{+c+}}</option>
++++</select>
</form>|code-block|syntax|javascript|2182180|component.ts|2182181|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});
++++}
}|2182182|entityMap^0|0|0|E|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>Try like this :</p>

<p><strong>component.html</strong></p>

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

<p><strong>component.ts</strong></p>

<pre><code>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});
    }
}
</code></pre>


blocks|key|278592|text|在你的成分中-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278593|确保使用值初始化formControl名称country。|offset|length|style|BOLD|278594|例如:假设您的表单组名是myForm，而_fb是FormBuilder实例，那么，|278595|....
this.myForm+=+this._fb.group({
++country:[this.default]
})|code-block|syntax|javascript|278596|并尝试将值替换为ngValue。|278597|编辑1：如果您无法在声明时初始化该值，那么当您拥有类似的值时，设置该值。|278598|this.myForm.controls.country.controls.setValue(this.country)+|278599|entityMap^0|0|L|7|0|C|6|K|3|0|0|4|1|8|7|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$]]

<p>In your component - </p>

<p>Make sure to initialize the formControl name <strong>country</strong> with a value. </p>

<p>For instance:
Assuming that your form group name is <strong>myForm</strong> and <strong>_fb</strong> is FormBuilder instance then,</p>

<pre><code>....
this.myForm = this._fb.group({
  country:[this.default]
})
</code></pre>

<p>and also try replacing <strong>[value]</strong> with <strong>[ngValue]</strong>. </p>

<p><strong>EDIT 1</strong>: If you are unable to initialize the value when declaring then set the value when you have the value like this.</p>

<pre><code>this.myForm.controls.country.controls.setValue(this.country) 
</code></pre>


blocks|key|2182235|text|以反应形式出现。可以在组件文件和ngValue的使用中进行绑定。欲了解更多细节，请浏览以下链接|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2182236|https://angular.io/api/forms/SelectControlValueAccessor|offset|length|2182237|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+%7C+json+}}</p>+
+++++++
++++`,
})
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]),
++});
}|code-block|syntax|javascript|2182238|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>In Reactive forms. Binding can be done in the component file and usage of ngValue. For more details please go through the following link</p>

<p><a href="https://angular.io/api/forms/SelectControlValueAccessor" rel="noreferrer">https://angular.io/api/forms/SelectControlValueAccessor</a></p>

<pre><code>import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    &lt;form [formGroup]="form"&gt;
      &lt;select formControlName="state"&gt;
        &lt;option *ngFor="let state of states" [ngValue]="state"&gt;
          {{ state.abbrev }}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/form&gt;

       &lt;p&gt;Form value: {{ form.value | json }}&lt;/p&gt; 
       &lt;!-- {state: {name: 'New York', abbrev: 'NY'} } --&gt;
    `,
})
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]),
  });
}
</code></pre>


blocks|key|548636|text|可以使用修补程序函数使用窗体组中的某些值设置默认值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|548637|component.html|548638|<form+[formGroup]="countryForm">
++++<select+id="country"+formControlName="country">
++++++++<option+*ngFor="let+c+of+countries"+[ngValue]="c">{{+c+}}</option>
++++</select>
</form>|code-block|syntax|javascript|548639|component.ts|548640|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
++++});

++}|548641|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can use the patch function for setting defaults with some of the values in your form group.</p>

<p>component.html</p>

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

<p>component.ts</p>

<pre><code>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
    });

  }
</code></pre>


blocks|key|2182276|text|作为选项，如果您只需要在没有默认值的下拉列表中添加默认文本，请尝试添加以下<option+disabled+value="null">default+text+here</option>：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2182277|<select+id="country"+formControlName="country">
+<option+disabled+value="null">default+text+here</option>
+<option+*ngFor="let+c+of+countries"+[value]="c"+>{{+c+}}</option>
</select>|code-block|syntax|javascript|2182278|在Chrome和Firefox中工作得很好。|2182279|entityMap^0|11|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>As option, if you need just default text in dropdown without default value, try add <code>&lt;option disabled value="null"&gt;default text here&lt;/option&gt;</code> like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;select id="country" formControlName="country"&gt;
 &lt;option disabled value="null"&gt;default text here&lt;/option&gt;
 &lt;option *ngFor="let c of countries" [value]="c" &gt;{{ c }}&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>In Chrome and Firefox works fine.</p>


blocks|key|278657|text|我挣扎着，从IntelliJ+IDEA的建议中找到了一种简单有效的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|278658|<select+id="country"+formControlName="country"++>
++<option+[defaultSelected]=true+[value]="default"+>{{default}}</option>
++<option+*ngFor="let+c+of+countries"+[value]="c"+>{{+c+}}</option>
</select>+|code-block|syntax|javascript|278659|在ts文件中分配值|278660|+countries+=+['USA',+'UK',+'Canada'];
+default+=+'UK'|278661|只需确保您的formControlName接受字符串，因为您已经将它分配为字符串。|278662|entityMap^0|6|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>I was struggling and Found this Easy and Effective way from <code>IntelliJ IDEA</code> suggestion</p>

<pre><code>&lt;select id="country" formControlName="country"  &gt;
  &lt;option [defaultSelected]=true [value]="default" &gt;{{default}}&lt;/option&gt;
  &lt;option *ngFor="let c of countries" [value]="c" &gt;{{ c }}&lt;/option&gt;
&lt;/select&gt; 
</code></pre>

<p>And On your ts file assign the values</p>

<pre><code> countries = ['USA', 'UK', 'Canada'];
 default = 'UK'
</code></pre>

<p>Just make sure your formControlName accepts string, because you already assigned it as a string.</p>


blocks|key|278322|text|<option+[defaultSelected]="condition">+Default+option+here+value</option>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|278323|条件必须为true才能默认选择输入。|unstyled|278324|默认情况下，要为例如UK进行选择，我们需要将选项et命名为“让条件如下”|278325|<option+[defaultSelected]="inputName.value==='UK'+"+#inputName>+Default+value+</option>|278326|若要默认情况下选择UK，则必须添加value属性或使用|278327|<option+[defaultSelected]="inputName.text==='UK'+"+#inputName>+Default+value+</option>|278328|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>&lt;option [defaultSelected]=&quot;condition&quot;&gt; Default option here value&lt;/option&gt;
</code></pre>
<p>condition must be true to select the input by default</p>
<p>To select for eg UK by default, we need to name the option et make the condition like this</p>
<pre><code>&lt;option [defaultSelected]=&quot;inputName.value==='UK' &quot; #inputName&gt; Default value &lt;/option&gt;
</code></pre>
<p>to select UK by default and you must add the value attribute or use</p>
<pre><code>&lt;option [defaultSelected]=&quot;inputName.text==='UK' &quot; #inputName&gt; Default value &lt;/option&gt;
</code></pre>


blocks|key|548732|text|组件：Default:+string+=+'-1';，如果是动态的，然后在方法中调用它，或者如果是静态的，那么调用这个内部构造函数，this.XYZFormGroup.controls['ABCList'].setValue(this.Default,+{onlySelf:+true});，this.XYZFormGroup.controls['ABCList'].setValue(this.Default,+{onlySelf:+true});：<option+value="-1">--Select+a+member--</option>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|548733|entityMap^0|3|N|1U|27|42|27|6A|1B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Component:<code>   Default: string = '-1';</code>
If dynamic then call this in your method or if static then call this inside constructor
<code>this.XYZFormGroup.controls['ABCList'].setValue(this.Default, {onlySelf: true}); </code>
HTML:<code> &lt;option value=&quot;-1&quot;&gt;--Select a member--&lt;/option&gt;</code></p>


<p>In Angular 4, I have the following configuration defined in a json config file.</p>

<pre><code> countries: ['USA', 'UK', 'Canada'];
 default: 'UK'
</code></pre>

<p>I need to display these in a dropdown using Reactive module.</p>

<p>Here is the code to do this (ts)</p>

<pre><code>countries: string[] = [];
default: string;
...
this.countries = config.countries;
this.default = config.default;
</code></pre>

<p>html</p>

<pre><code>&lt;select id="country" formControlName="country"  &gt;
 &lt;option *ngFor="let c of countries" [value]="c" &gt;{{ c }}&lt;/option&gt;
&lt;/select&gt; 
</code></pre>

<p>This does the job and displays the countries in a drop down.
However, I also need to select a country by default and the default country comes from the 'default' key defined in json.</p>

<p>So, I tried doing something like this</p>

<p>
 {{ c }}
</p>

<p>However, this does not work. By default an empty value if selected.</p>

<p>How can I make sure that a predefined value is selected by default?</p>


Angular 4 - Select default value in dropdown [Reactive Forms]

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在角4中，我在json配置文件中定义了以下配置。 countries: ['USA', 'UK', 'Canada']; default: 'UK'我需要使用反应性模块在下拉列表中显示这些内容。下面是执行此操作的代码(ts)countries: string[] = [];default: string;...this...

问角4-在下拉列表中选择默认值[反应形式]
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角4-在下拉列表中选择默认值[反应形式]EN