Angular2 - Dropdown/select list controller - setting logged in user as the default user

JavaScript
1

Hello,

I have a select/dropdown controller with a list of names populated at initial startup and this works.

What I like to do is to have the select controller have the logged in user as the default user selected/displayed.

for example, loggedInMember = 3 (3 representing the index number of the user who is logged in).

If possible, I also like to minimize the coding in the html to keep it clean.

So, the question is how do i go about doing that?

any help you can provide would be greatly appreciated

form.component.html

<div class="form-group">
	<label class="control-label" for="drp_severityID">Assign incident to: (default To: Mike Smith)</label>
	<select class="form-control" formControlName="memberList">                     
		<option *ngFor="let mem of getMemberList" [value]="mem.usr_index">{{mem.usr_firstname}} {{mem.usr_lastname}}</option>                             
	</select>
</div>
2

You should be able to assign default value during form model initialization.

import { Component  } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedInUserId: number = 2;
  members: { usr_index: number, usr_firstname: string, usr_lastname: string }[] = [
    { usr_index: 1, usr_firstname: "Bob", usr_lastname: "Marley" },
    { usr_index: 2, usr_firstname: "Janis", usr_lastname: "Joplin" },
    { usr_index: 3, usr_firstname: "Ray", usr_lastname: "Keith" },
  ];
  form = new FormGroup({
    memberList: new FormControl(this.loggedInUserId),
  });

  get memberList(): {}[] { return this.members; }

}

and:

<form [formGroup]="form">
  <label>Assign incident to:</label>
  <select formControlName="memberList">
    <option *ngFor="let mem of memberList"
            [value]="mem.usr_index">
      {{mem.usr_firstname}} {{mem.usr_lastname}}
    </option>
  </select>
</form>
3

Hi Pullo,

Thanks for the reply back Pullo. I’m somewhat new to angular and not sure how to incorporate your answer into my code. having said that I should have added more of my code into the post…

I added more code below and could you have a look and let me know how to incorporate it into my code?

thanks you.

component.ts

export class NewComponent implements OnInit {
private loggedIn = '3';

getMemberList: NewIncidentType[];

formValidators(){
	   this.incidentForm = this._fb.group({
    	    memberList: ['', Validators.required]
           });

Tthis._incService.getMemberListMethod().subscribe(memList => { this.getMemberList = memList;} );

component.html

<div class="form-group">
	<label class="control-label" for="drp_severityID">Assign incident to: (default To: Mike Smith)</label>
	<select class="form-control" formControlName="memberList">                     
		<option *ngFor="let mem of getMemberList" [value]="mem.usr_index">{{mem.usr_firstname}} {{mem.usr_lastname}}</option>                             
	</select>
</div>
4

Like this:

memberList: [this.loggedIn, Validators.required]
5

Still looking for suggestions and alternative answers.

6

Lol. Didn’t work then?
Could you make a Plunkr demonstrating the issue you are having.

7

Hi Pullo,

I apologize for that replay, it wasn’t that I’m ignore your replies infect I greatly appreciate your replies.
I’m new to Angular and most likely your answers are what I need to fix my issue but due to my understanding of Angular its bit; for better word advanced and short…:slight_smile:

I’ll try and set something up on plunker…

8

Hi Pullo,

I was able to figure it out and get the code to work. when back to your post and looked at it little bit more, I kind knew you were on the right track and with little trial and error i got it to work.

thanks again

1 Like
9

Ok, cool. Thanks for letting me know. What did you end up doing?

10 
this.testForm = this._fb.group({ 
    userList: [this.userLoggedIN, Validators.required]
});

To simple… I took the single quotes out (side note, it only took me a week to figure that out. maybe I should quite while I’m ahead :slight_smile: )

from: ‘this.userLoggedIN’
to: this.userLoggedIN …
too easy

11

Well, you got there in the end :slight_smile:

But might I suggest you invest the time in reading a couple of Angular 2 tutorials to learn the basics?

The Tour of Heroes one is really good, covers a lot of important Angular concepts and only takes a couple of hours from start to finish.

Also, we have a great series on building a CRUD app over on the JS channel (although we’re only at part 3 of 5 right now)

12

Hi Pullo,

I tried both free and payed tutorials and they were all great in there own right but they can only do so much.
Just like school, you learn much as you can but when you hit the real world, things aren’t so scripted like tutorials are.

I started a little project and see where it takes me.

r

1 Like
13

Cool. What exactly are you building?

14

Hi Pullo,

After searching gGithub I decided to start a little project creating a bug tracking application. yes, we need another bug tracking software :slight_smile:
It seems to have a little bit of everything so see where it goes…

r

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.