How to bind default value of input field to variable?

Question

When clicking a certain button in the UI of my Angular App, a dialog opens where the user can update his/her personal information. For the sake of simplicity I restrict the code in the following to his/her username. That is, I assume the user can only change his/her username in the dialog.

The code opening the dialog is the following:

openDialog() {

    this.dialog.open(UpdatePersonalDataComponent , {data: {
      firstName: this.firstName,
      username: this.username 
      }
    });

 }

The file update-personal-data.component.ts looks as follows:

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';


@Component({
  selector: 'app-consultants-update-dialog',
  templateUrl: './consultants-update-dialog.component.html',
  styleUrls: ['./consultants-update-dialog.component.css']
})
export class UpdatePersonalDataComponent implements OnInit {


  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {

  }

}

The file update-personal-data.component.html looks as follows at the moment:

<form #f="ngForm" (ngSubmit)="onSubmit(f)" fxLayout="column" fxLayoutAlign="center center"> 
    <h1 mat-dialog-title>Hi, {{ data.firstName }}. Update your username below.</h1>
    <mat-dialog-content fxLayout="column" fxLayoutAlign="center">
        <mat-form-field>
          <input 
            matInput 
            ngModel 
            #userName="ngModel" 
            name="userName" 
            type="text" 
            value="{{data.username}}"
            required>
        </mat-form-field>
    <mat-dialog-content   
    <mat-dialog-actions>
        <button mat-raised-button color="primary" [mat-dialog-close]>Cancel</button>   
        <button type="submit" mat-raised-button color="primary" [mat-dialog-close] [disabled]="f.invalid">Submit</button>    
    </mat-dialog-actions>
 </form>

As you can see, I want to set the default value of the input field equal to the old username, using the following code:

value="{{data.username}}"

However, this doesn't work. The input field is empty. I tried several other methods as well (e.g. [value]="{{data.username}}") but nothing worked. Does anybody know how to set the default value of the input field equal to the value of the variable data.username (which was passed to the dialog)?

Answer 1

I think that the better approach to do this is use the FormGroup of ReactiveForms Module. Something like this.

In your component.

 public form: FormGroup = new FormGroup({
    userName: new FormControl(''),
  });

In you HTML

<form [formGroup]="form">

<mat-form-field class="full-width">
        <input autocomplete="off" required matInput
               formControlName="userName" placeholder="Username">
</mat-form-field>

</form>

Now, you have control of your FORM to do this.

this.form.setValue({
  userName: YOUR_VALUE,
});

Answer 2

If you don't want to use formGroup, simple use following in your HTML <input>

<mat-form-field>
   <input matInput [value]="username"
          type="text" required>
</mat-form-field>

And your component:

export class UpdatePersonalDataComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {

    this.username = data.username;

  }

  ngOnInit() {

  }