Question

伙计们，我有以下代码：

 <select class="form-control" required formControlName="validation">                         
    <option *ngFor="let option of rtoRpoReq; let i = index" [ngValue]=option [selected]="option.selected" [disabled]="option.disabled" > {{option.option}} </option>
 </select>

和我要遍历的对象数组如下：

{ "option": "question", "disabled": true, "selected": true },
{ "option": "option1", "formula": x },
{ "option": "option2", "formula": y },
{ "option": "option3", "formula": z }

我的formControl看起来像这样：

    this.form = new FormGroup({
        validation: new FormControl('', Validators.required),
    })

问题是我希望将第一个选项显示为占位符，而在选择其他选项之前，该框将为空白。有谁知道我该如何解决？干杯

Answer 1

首先，应通过在属性周围添加双引号来使HTML有效。您还可以删除无用的索引变量和无用的选定属性：

<select class="form-control" required formControlName="validation">                         
  <option *ngFor="let option of rtoRpoReq" [ngValue]="option" [disabled]="option.disabled">{{option.option}}</option>
</select>

现在，如您所见，以上选择已绑定到名为validation的表单控件。因此，选择的选项是其值是名为validation的表单控件的值的选项。

每个选项都与数组rtoRpoReq的元素相关联，选项的值是数组本身的元素：

*ngFor="let option of rtoRpoReq" [ngValue]="option"

因此，例如，如果要选择第一个元素，则rtoRpoReq数组的第一个元素必须是表单控件的值。

因此，应使用以下命令创建表单constrol：

this.form = new FormGroup({
    validation: new FormControl(this.rtoRpoReq[0], Validators.required),
});

如果希望第三个选项被选中，请使用

this.form = new FormGroup({
    validation: new FormControl(this.rtoRpoReq[2], Validators.required),
});

如果要以编程方式更改所选值，请使用

this.form.get('validation').value = this.rtoRpoReq[someIndex];

角度4 [选定的]显示空白选项，而不是选定的选项

1 个答案: