Angular 2 select不绑定（第2次迭代） [英] Angular 2 select does not bind (2nd iteration)
问题描述
我已经在这里提出了类似的问题 Angular 2 select没有绑定和认为它已经解决了。要遵循建议，我现在试图随处使用反应形式并尝试使用建议的选项进行选择：
< form [formGroup] =form>
< option value =item1>选择< / option>
< option value =item2>& lt; 0.5 cm3< / option>
< option value =item3>& gt; 0.5 cm3< / option>
< / select>
< form>
{{form.controls.selectedValue.value}}
问题它不起作用...当它第一次加载时，没有选定的值被显示。我只能使用它：
< select class =form-controlname =totalvolume[ （ngModel）] =totalvolume[ngModelOptions] ={standalone：true}>
< option value =item1>选择< / option>
< option value =item2>& lt; 0.5 cm3< / option>
< option value =item3>& gt; 0.5 cm3< / option>
< / select>
但我想正确地做到这一点并摆脱 ngModel 。
我也试过这个：
< ; select class =form-controlformControlName =progress[value] =progress>
< option value =NotStarted>未开始< / option>
< option value =InProgress>进行中< / option>
< option value =Finalized>最终化< / option>
< / select>
< label> AAA {{form.controls.progress.value}}< / label>
它显示我想要的选项（我将它设置在 ts file - progress ='InProgress'），但它在某种程度上不能正确绑定它，因为在表单加载后标签 AAA 为空。如果我切换选择的值，它开始看到它，因为有显示 AAAFinalized 例如...我不知道我做错了什么。
BTW {{form.controls.get（'selectedValue'）。value}} 给出错误
< blockquote>
嵌入模板：308：7引起：
self.parentView.context.form.controls.get不是函数
无论是form.get（'selectedValue'）.value还是form.controls.selectedValue.value都有效。
在这次尝试中...
< select class =form controlformControlName =progress[value] =progress>
在反应形式中， [value] 是完全忽略，您需要为 FormControl 设置所需的值。所以如果你想设置变量 progress 作为初始值，你应该这样做：
form：FormGroup;
progress ='InProgress'
构造函数（private fb：FormBuilder）{
this.form = fb.group（{
progress：[this.progress] / / here！
}）;
}
就像您注意到的一样。
$ b
progress 变量与formcontrol完全不同 progress 。唯一的是他们共享相同的名称，但Angular无法知道您希望表单控件的初始值与变量 progress 具有相同的值，除非你告诉Angular如此。
在这种情况下，我也看不到甚至需要使用变量 progress ，您可以简单地设置在生成表单时，初始值为 inProgress ：
this。 form = fb.group（{
progress：['InProgress']
}）;
I already asked similar question here Angular 2 select does not bind and thought that it was solved. To follow suggestions I'm now trying to go with reactive forms everywhere and trying to use the suggested option for select:
<form [formGroup]="form">
<select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select">
<option value="item1">Select</option>
<option value="item2">< 0.5 cm3</option>
<option value="item3">> 0.5 cm3</option>
</select>
<form>
{{form.controls.selectedValue.value}}
The problem is it doesn't work... When it loads for the first time no selected value is displayed. I was only able to make it work using:
<select class="form-control" name="totalvolume" [(ngModel)]="totalvolume" [ngModelOptions]="{ standalone : true }">
<option value="item1">Select</option>
<option value="item2">< 0.5 cm3</option>
<option value="item3">> 0.5 cm3</option>
</select>
But I want to do it properly and get rid of ngModel.
I also tried this:
<select class="form-control" formControlName="progress" [value]="progress">
<option value="NotStarted">Not Started</option>
<option value="InProgress">In Progress</option>
<option value="Finalized">Finalized</option>
</select>
<label>AAA{{form.controls.progress.value}}</label>
it displays the selected option I want (I set it up at the ts file - progress = 'InProgress'), but it somehow doesn't bind it properly as label AAA is empty after the form loads. If I switch select's value, it starts seeing it as there is AAAFinalized is displayed for example... I don't know what I'm doing wrong.
BTW {{form.controls.get('selectedValue').value}} gives an error
"inline template:308:7 caused by: self.parentView.context.form.controls.get is not a function"
Either "form.get('selectedValue').value" or "form.controls.selectedValue.value" work.
Here in this attempt...
<select class="form-control" formControlName="progress" [value]="progress">
in reactive forms, [value] is totally ignored, you need to set the value you want for the FormControl. So if you want to set the variable progress as the initial value, you'd want to do this:
form: FormGroup;
progress = 'InProgress'
constructor(private fb: FormBuilder) {
this.form = fb.group({
progress: [this.progress] // here!
});
}
just like you noticed.
progress variable is completely different from the formcontrol progress. The only thing is that they share the same name, but Angular can't know that you want the initial value of the form control to have the same value as your variable progress unless you tell Angular so.
In this case I also don't see the need of even using a variable progress, you can simply set the initial value as inProgress when you build the form:
this.form = fb.group({
progress: ['InProgress']
});
这篇关于Angular 2 select不绑定（第2次迭代）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
