Question

我已经在Angular 2 select does not bind问了类似的问题，并认为它已经解决了。要遵循建议，我现在尝试在所有地方使用被动表单，并尝试使用建议的选项进行选择：

<form [formGroup]="form">
   <select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</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-control" name="totalvolume" [(ngModel)]="totalvolume" [ngModelOptions]="{ standalone : true }">
     <option value="item1">Select</option>
     <option value="item2">&lt; 0.5 cm3</option>
     <option value="item3">&gt; 0.5 cm3</option>
</select>

但是我想要正确地做到并摆脱ngModel。

我也试过这个：

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

它会显示我想要的所选选项（我在ts file - progress = 'InProgress'处设置），但是在表单加载后标签AAA为空时，它在某种程度上无法正确绑定。如果我切换选择的值，它会开始看到它，因为显示AAAFinalized例如......我不知道我做错了什么。 BTW {{form.controls.get('selectedValue').value}}给出错误

＆＃34;内联模板：308：7引起： self.parentView.context.form.controls.get不是函数＆＃34;

＆＃34; form.get（＆＃39; selectedValue＆＃39;）。value＆＃34;或＆＃34; form.controls.selectedValue.value＆＃34;工作

Answer 1

如果您使用的是模型驱动的表单，那么首先应该在相关组件中定义表单控件。在您的情况下，将以下编码放在组件

中

form: FormGroup;

constructor(private fb: FormBuilder) {
  createForm();
}

createForm(){
  this.form = this.fb.group({
      'selectedValue': ['', Validators.required],
  });
}

如果您想获得选择框的值，您可以继续运行以下命令

var selectedValur = this.form.controls['selectedValue'].value;

但如果您想要始终订阅更改，那么您可以执行以下操作。

ngOnInit() {
    const selectValueControl = this.form.get('selectedValue');
    selectValueControl.valueChanges.forEach(
      (value: string) => console.log(value)
    );
  }

Answer 2

这次尝试......

<select class="form-control" formControlName="progress" [value]="progress">

在被动形式中，[value]被完全忽略，您需要为FormControl设置所需的值。因此，如果您想将变量progress设置为初始值，则需要执行此操作：

form: FormGroup;
progress = 'InProgress'

constructor(private fb: FormBuilder) {
  this.form = fb.group({
    progress: [this.progress] // here!
  });
}

就像你注意到的一样。

progress变量与formcontrol progress完全不同。唯一的问题是它们共享相同的名称，但Angular不能知道您希望表单控件的初始值与变量progress具有相同的值，除非您告诉Angular。

在这种情况下，我也看不到甚至需要使用变量progress，您只需在构建表单时将初始值设置为inProgress：

this.form = fb.group({
  progress: ['InProgress']
});

Angular 2选择不绑定（第二次迭代）

2 个答案: