Get dropdown value with Angular Reactive Forms

Question

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?

Yan Koshelev · Accepted Answer · 2021-09-08 18:27:34Z

1

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

answered Sep 8, 2021 at 18:27

Yan Koshelev

1,1291 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cagkan Mert Oztas Over a year ago

Aah, yes. Thank you for advice. Second one is ok for me. I forgot add formControlName attribute. Thanks for help again.

Collectives™ on Stack Overflow

Get dropdown value with Angular Reactive Forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related