Angular 引导模式-下拉列表的默认选择

在引导模式中，不显示默认选项

在下拉列表中，我希望“请选择”是默认选项，而它显示为“A”作为默认选项

以下是HTML代码：

<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Add New</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- <div>
                    <input
                        type="text"
                        class="form-control">
                </div> -->

                <div class="mt-3">
                    <select class="form-control"
                        formControlName="ctrlType">
                        <option value="" selected disabled>Please select</option>
                        <option
                        *ngFor="let type of formCtrlTypes">
                            {{type}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div [formGroup]="form">
        <div class="form-group">
            <label class="form-control-placeholder" for="Name">Name</label>
            <input type="text" id="Name" formControlName="name" class="form-control">
        </div>


        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
            ++ Add
        </button>
    </div>

</div>

输出：

其中，默认设置为“请选择”

---

您将表单控件错误地绑定到select元素。如果从select元素中删除

FormControlName=“ctrlType”

，则会将禁用的选项“请选择”设置为默认值

使用SELECT标签时，请考虑使用<代码>（更改）< /代码>事件绑定。

我在这里创建了一个关于如何做到这一点的示例：

---

您将表单控件错误地绑定到select元素。如果从select元素中删除

FormControlName=“ctrlType”

，则会将禁用的选项“请选择”设置为默认值

使用SELECT标签时，请考虑使用<代码>（更改）< /代码>事件绑定。

我在这里创建了一个关于如何做到这一点的示例：

export class ExampleComponent {
  public formCtrlTypes = [
    "A",
    "B",
    "C",
    "D",
  ]
  form = new FormGroup({
    name: new FormControl(""),
    formCtrls: new FormArray([])
  })
  addNewFormCtrl() {
    const add = this.form.get('formCtrls') as FormArray;
    add.push(this.fb.group({
    ctrlType: ""
    }))
    }
  constructor(private fb: FormBuilder) { }
}