CODEWITHSUNDEEP
angular
Gopal Dutt
Gopal Dutt

Reputation: 5

Unable to get selected value in Angular 10

enter image description here

I am trying to get selected value but it returns null. If I remove form-select class, it is working fine; but, when I add that class, it returns null.

<div class="form-group">
          <div class="form-label-group">
            <label class="form-label">Language</label>
          </div>
          <div class="form-control-wrap">
              <select #selectedLang [formControl]="loginFormControl.language" 
                  (change)="storeLangVal(selectedLang.value)" name="language" 
                  class="form-select form-select-sm">
                  <option *ngFor="let lang of langList" [value]="lang.id">
                     {{lang.name}}
                  </option>
              </select>
          </div>
        </div>
    
    langList: langList[] = [{id: "en", name: "English"}, {id: "hi", name: "Hindi"}];
      loginForm = new FormGroup({
        userName: new FormControl('', [Validators.required]),
        password: new FormControl('', [Validators.required]),
        language: new FormControl('en')
      })
    
    storeLangVal(language) {
        console.log(language);
      }
    get loginFormControl() {
        return this.loginForm.controls;
      }

Upvotes: 0

Views: 193

Answers (1)

wnvko
wnvko

Reputation: 2120

First I do not see a formGroup directive in your snippet. You should add a formGroup directive and set its value to loginform. On second place you have formControl in your select set to loginFormControl.language. This is not correct. You should set formContolName directive to language. Finally you should has something like this:

<div fromGroup="loginForm" class="form-group">
    <div class="form-label-group">
        <label class="form-label">Language</label>
    </div>
    <div class="form-control-wrap">
        <select #selectedLang
            formControlName="language"
            (change)="storeLangVal(selectedLang.value)"
            name="language"
            class="form-select form-select-sm"
         >
            <option *ngFor="let lang of langList" [value]="lang.id">
                {{lang.name}}
            </option>
        </select>
    </div>
</div>

Upvotes: 1

Related Questions