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)?

William Aguera · Answer 1 · 2018-06-15T04:13:34.727

17

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,
});

edited Jun 15 '18 at 04:13

answered Jun 15 '18 at 03:56

William Aguera

323
1
6

I was trying to set a default value in a matInput textbox using this: tribeForm: FormGroup = new FormGroup({ tribeName: new FormControl('WOW default'), }); but it was not working. I will just use a matSelect. Thanks for this "this.form.setValue" – marknt15 Jul 20 '19 at 06:37

score 9 · Answer 2 · edited Jun 15 '18 at 06:36

9

This will work, use ngmodel

<input matInput
[(ngModel)]="data.username" 
#userName="ngModel" 
name="userName" 
type="text" 
required>

edited Jun 15 '18 at 06:36

Sinto

3,915
11
36
70

answered Jun 15 '18 at 06:17

RamAnji

470
3
12

Can't bind to 'ngModel' since it isn't a known property of 'input' - i got this error. thanks – MindRoasterMir Mar 08 '21 at 22:31

score 6 · Answer 3 · answered Jan 24 '20 at 12:11

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() {

  }

score 5 · Answer 4 · edited Oct 05 '22 at 20:57

5

As per the answer given by @William Aguera, I am just editing last part of answer:

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

Here I have only replaced setValue with patchValue. I often used this in editing forms.

edited Oct 05 '22 at 20:57

halfer

19,824
17
99
186

answered Aug 05 '19 at 12:54

sangRam

315
4
17

setValue works if it is the only item in your form. patchValue is effective when you want to set only some of the form elements. – Jamie McIntyre Jan 15 '21 at 16:07

How to bind default value of input field to variable?

4 Answers4