使用 Angular 响应式表单获取下拉值

Question

我正在构建一个带有 angular 响应式表单的表单。我可以获得我所有的表单值，但平台实体的下拉值。

这是 .ts 和 .html 文件。

.html 文件

<div class="input-group mb-3">
    <label class="input-group-text" for="platformDropdown">Platform</label>
    <select class="form-select" id="platformDropdown">
        <option selected>Choose...</option>
        <option *ngFor="let platform of platforms" [ngValue]="platform.id">{{ platform.name }}</option>
    </select>
</div>

.ts 文件

userAddForm: FormGroup;
platforms: Platform[];

constructor(private formBuilder: FormBuilder, 
    private toastrService: ToastrService,
    private platformService: PlatformService) { }

ngOnInit(): void {
    this.createUserAddForm();
    this.getPlatforms();
}


createUserAddForm() {
    this.userAddForm = this.formBuilder.group({
      platformId: ["", Validators.required],
      username: ["", Validators.required],
      isFollowed: [false, Validators.required],
      isClosed: [false, Validators.required],
      lastControlDate: ["", Validators.required]
    });
}

getPlatforms() {
    this.platformService.getPlatforms()
        .subscribe(response => this.platforms = response.data);
}

add() {
    let userModel = Object.assign({}, this.userAddForm.value);
    console.log(userModel);
}

当我尝试提交表单并将数据写入控制台时，平台 ID 变成白色 space。我怎样才能达到这个值？

Answer 1

乍一看，您只是忘记了将控件绑定到 select

<select [formControl]="userAddForm.get('platformId')" class="form-select" id="platformDropdown">

或者如果您已经绑定了 formGroup 那么：

<select formControlName="platformId" class="form-select" id="platformDropdown">

使用 Angular 响应式表单获取下拉值

Get dropdown value with Angular Reactive Forms

typescript

dropdown

angular