set input value based on selected dropdown value

Question

Using [(ngModel)], I want to set an inputs value based on a selected dropdown.

I have managed to bind a selected dropdown onto an input field but I can't bind it if the selected dropdown value is an array. I need to bind multiple array properties to multiple input fields.

Here is a stackblitz I created and what I have tried so far.

TypeScript file:

savedCards = [];
selectedCard = '';

selectDropdownCard(card) {
  this.savedCards.find((item) => item.id === card.id)
    ? this.savedCards = this.savedCards.filter((item) => item.id === card.id)
    : this.savedCards = [card];
  this.assignToNgModel();
}

assignToNgModel() {
  this.selectedCard = '';
  this.savedCards.map((item) => this.selectedCard += item.viewValue + ' ');
  this.savedCards.forEach((item) => {
    console.log(item);
  });
  console.log(this.selectedCard);
}

HTML file:

<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
  <div *ngIf='!hasSelected'>
    <div>
      <p>dropdown</p>
    </div>
  </div>
  <div *ngFor="let card of savedCards">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<div class="div2" *ngIf="show">
  <div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<input placeholder="id" [(ngModel)]="selectedCard" type="text">
<input placeholder="viewValue" [(ngModel)]="selectedCard" type="text">
<input placeholder="name" [(ngModel)]="selectedCard" type="text">
<input placeholder="value" [(ngModel)]="selectedCard" type="text">

I could use some guidance and suggestions on how to solve this.

It's not clear, when you select several options in the dropdown what should happen with the data and the inputs? — igor_c
– igor_c, Commented Aug 24, 2019 at 15:17
it should map the data at input field, like I want to bind viewValue at viewValue input field, id at id input field, name at name input field and value at value input field — hafizi hamid
– hafizi hamid, Commented Aug 24, 2019 at 15:20
But you mean to select one dropdown option and assign its properties to the inputs — igor_c
– igor_c, Commented Aug 24, 2019 at 15:27
If I understand correctly you should add this.selectedCard = card; to the selectDropdownCard() method and add correct object property to the input. For example for id it's going to be [(ngModel)]="selectedCard.id" etc. — igor_c
– igor_c, Commented Aug 24, 2019 at 15:34

igor_c · Accepted Answer · 2019-08-24 15:40:04Z

1

Here's the forked stackblitz https://stackblitz.com/edit/angular-vpvjff with the solution I described in the comment. I think you should refactor you code as I'm not sure what's it doing.

answered Aug 24, 2019 at 15:40

igor_c

1,2501 gold badge9 silver badges21 bronze badges

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

1 Comment

hafizi hamid Over a year ago

yes you right, I dont need assignToNgModel(), my mistakes, thanks, this should be acceptable answer

Collectives™ on Stack Overflow

set input value based on selected dropdown value

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