CODEWITHSUNDEEP
angulartypescript
K.Z
K.Z

Reputation: 5075

How to bind selected value to dropdown in Angular 5

I am working on Angular 5 application with dropdown. I have data coming from database, followed by mapped to javaScript object. I am trying to configure 'Selected' value but unable to do so.

in following code, option: [] --> 'optionSelected' defined if is selected value by true or false, schema structure as;

enter image description here

component

 else  if(questionElementType=="dropdown")
 {

   let _dropBox = new DropdownQuestion({
     consultationId: questionsList[key].consultationId,
     questionId: questionsList[key].questionId,
     questionElementType: questionsList[key].questionElementType[0].title,          
     questionType: questionsList[key].questionType,
     title:questionsList[key].title,
     displayId: questionsList[key].displayId,
     key: questionsList[key].questionId,    
     label: questionsList[key].title,
     options:  questionsList[key].answerOptions.map(function(item){
       return {"key": item.preDefineAnswerOptionId, "value": item.text, "optionSelected": item.preDefineAnswerOptionId==questionsList[key].answer[0].answerValue? "true": "false" }
    }),        
     order: 1
   });

   this.mappedQuestions.push(_dropBox);
 }

template

  <div *ngSwitchCase="'dropdown'"> <small>dropdown</small>
        <div class="form-group">
            <select [id]="question.key" [formControlName]="question.key">
                <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="optionSelected">{{opt.value}}</option>
            </select>
        </div>            
    </div>

Upvotes: 0

Views: 5361

Answers (2)

K.Z
K.Z

Reputation: 5075

found answer as;

component

 else  if(questionElementType=="dropdown")
 {
   let _dropBox = new DropdownQuestion({
     consultationId: questionsList[key].consultationId,
     questionId: questionsList[key].questionId,
     questionElementType: questionsList[key].questionElementType[0].title,          
     questionType: questionsList[key].questionType,
     title:questionsList[key].title,
     displayId: questionsList[key].displayId,
     key: questionsList[key].questionId,    
     label: questionsList[key].title,
     value: questionsList[key].answer.length<=0? null : questionsList[key].answer[0].answerValue.toLowerCase(),
     options:  questionsList[key].answerOptions.map(function(item){
       return {"key": item.preDefineAnswerOptionId, "value": item.text }
    }),        
     order: 1
   });

   this.mappedQuestions.push(_dropBox);
 }

template

 <div *ngSwitchCase="'dropdown'"> <small>dropdown</small>
        <div class="form-group">
            <select [id]="question.key" [formControlName]="question.key" [(ngModel)]="question.value">
                <option *ngFor="let opt of question.options" [value]="opt.key" >{{opt.value}} {{opt.key}}</option>
            </select>
        </div>            
  </div>

Upvotes: 0

cobolstinks
cobolstinks

Reputation: 7143

There are a couple of ways to go here. Personally I like binding the form control value to the entire selected object. To do that you can update your view template to this:

  <div *ngSwitchCase="'dropdown'"> <small>dropdown</small>
    <div class="form-group">
        <select [id]="question.key" [formControlName]="question">
            <option *ngFor="let opt of question.options" [value]="opt" [selected]="opt.optionSelected">{{opt.value}}</option>
        </select>
    </div>            
</div>

then in your component the form control value will be the entire selected item's object. In other words 

myForm.controls.question.value

will hold your entire selected object.

Make sure you instaniate your formGroup in your component like so:

 this.myForm= new FormGroup({
  'question': new FormControl('', []),
   ... (other controls here)

And then bind the form in your viewtemplate like this:

 <form  [formGroup]="myForm" novalidate autocomplete="off">
...controls in here
</form>

Upvotes: 1

Related Questions