CODEWITHSUNDEEP
angulardefault-valueinput-fieldproperty-binding
Tommy
Tommy

Reputation: 719

How to bind default value of input field to variable?

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

Upvotes: 14

Views: 54595

Answers (4)

sangRam
sangRam

Reputation: 365

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.

Upvotes: 6

denyoha
denyoha

Reputation: 183

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

  }

Upvotes: 7

RamAnji
RamAnji

Reputation: 470

This will work, use ngmodel

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

Upvotes: 9

William Aguera
William Aguera

Reputation: 333

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

Upvotes: 17

Related Questions