Display username in the input (text) in my Angular 2 app

Question

I have an angular 2 app that displays the username in the text input as a text. What I do is to get user from my component using userService and display it on my html template. Here is my input html field:

  <div class="row" *ngFor="let user of users">
  <div class="col-md-5 mb-2">
      <label>Researcher:</label>
      <input id="createdBy" type="text" class="form-control" 
        [(ngModel)]="screen.createdBy" name="createdBy" 
        required #createdBy="ngModel" 
        placeholder="{{ user.firstName }}" 
        ngValue="user.firstName"
        >
  </div>

I use placeholder attribute to test to make sure I retrieve the user first name and I do. Placeholder displays it. But I need to display user's first name as a value of the text field just like asp.net.

I've tried ngValue and value attributes but I couldn't get that. FormsModule and BrowserModule are defined in the app.module.ts file. I will be appreciated if you could show me where I am missing.

Rodrigo Ferreira · Accepted Answer · 2018-04-16 20:40:33Z

1

When you are using [(ngModel)] you are indeed setting the value of the input so if you want to display the user.firstName you need to copy that value to screen.createdBy.

answered Apr 16, 2018 at 20:40

Rodrigo Ferreira

1,1018 silver badges11 bronze badges

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

3 Comments

Fabian Over a year ago

screen.createdBy should be assigned to user.firstName. Basically I should get username from userService and display it in the input. Then this value should be screen.createdBy

Rodrigo Ferreira Over a year ago

If you retrieve the username from userService you should copy that value to screen.createdBy in order to display it in the input.

Rodrigo Ferreira Over a year ago

[(ngModel)]="screen.createdBy" works in both ways, it displays the value of screen.createdBy if it changes, and also stores the value of the input if the input changes.

Collectives™ on Stack Overflow

Display username in the input (text) in my Angular 2 app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related