Question

我有一个表单，我正在尝试通过FormBuilder进行验证，而且所有内容似乎都有效，但是下拉列表。 option中的值未反映在组件类中。为简单起见，我将发布下拉部分。

this.form = formBuilder.group({
  'type': [null, Validators.required]
});

这只是检查表单更改是否触发事件。所有的输入框都可以正常工作，它只是没有触发它的下拉列表。

this.form.valueChanges
  .map((value) => {
    console.log(value);    //Log form changes
    return value;
  })
  .filter((value) => this.form.valid)
  .subscribe((value) => {
    console.log("Model Driven Form valid value: vm = ", JSON.stringify(value));
  });

和html部分

<select formControlName="type" class="validate">
    <option value="" disabled selected>Type</option>
    <option value="restaurant">Restaurant</option>
    <option value="bar">Bar</option>
    <option value="cafe">Cafe</option>
</select>

如果我在console.log()下拉菜单中选择了某个选项后，type表单控件，我可以看到该值为null。

Answer 1

更新：您无法在rxjs filter上使用map，

this.form.valueChanges
.map((value) => {
    console.log(value);    //Log form changes
    return value;
 })
 .subscribe((value) => {
    console.log("Model Driven Form valid value: vm = ", JSON.stringify(value));
 });

StackBlitz

<select formControlName="type" class="validate">
    <option [value]="" disabled selected>Type</option>
    <option [value]="restaurant">Restaurant</option>
    <option [value]="bar">Bar</option>
    <option [value]="cafe">Cafe</option>
</select>

应该是

<select formControlName="type" class="validate">
    <option value="" disabled selected>Type</option>
    <option value="restaurant">Restaurant</option>
    <option value="bar">Bar</option>
    <option value="cafe">Cafe</option>
</select>

当你说[value]时，Angular需要一个变量名称，所以在第一种情况下，当你说 [value]="restraunt"角度检查名为restraunt的变量。

相反，当您将值指定为普通的html属性value="restraunt"时，您将传递字符串 restraunt作为值。

模型驱动表格下拉列表无效。没有得到价值

1 个答案:

StackBlitz