Search code examples
angulartypescriptdropdown

Get dropdown value with Angular Reactive Forms

I'm building a form with angular reactive forms. I can getting all my form value but platform entity's dropdown value.

Here's the .ts and .html files.

.html file

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

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);
}

When I try to submit form and write data to console, platform id is getting just white space. How can I reach this value?

enter image description here

Solution

  • For the first look you just forgot bind control to the select

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

    or if you already binded formGroup then:

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