web-dev-qa-db-fra.com

Comment lier la valeur par défaut du champ d'entrée à la variable?

Lorsque vous cliquez sur un certain bouton dans l'interface utilisateur de mon Angular App, une boîte de dialogue s'ouvre où l'utilisateur peut mettre à jour ses informations personnelles. Par souci de simplicité, je limite le code ci-dessous à son/son nom d'utilisateur. Autrement dit, je suppose que l'utilisateur ne peut modifier son nom d'utilisateur que dans la boîte de dialogue.

Le code ouvrant la boîte de dialogue est le suivant:

openDialog() {

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

 }

Le fichier update-personal-data.component.ts se présente comme suit:

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

  }

}

Le fichier update-personal-data.component.html se présente actuellement comme suit:

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

Comme vous pouvez le voir, je veux définir la valeur par défaut du champ de saisie égale à l'ancien nom d'utilisateur, en utilisant le code suivant:

value="{{data.username}}"

Cependant, cela ne fonctionne pas. Le champ de saisie est vide. J'ai également essayé plusieurs autres méthodes (par exemple [value] = "{{data.username}}") mais rien n'a fonctionné. Quelqu'un sait-il comment définir la valeur par défaut du champ de saisie égale à la valeur de la variable data.username (qui a été transmise à la boîte de dialogue)?

angulardefault-valueinput-fieldproperty-binding
7
Tommy

Cela fonctionnera, utilisez ngmodel

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

Je pense que la meilleure approche pour ce faire est d'utiliser le module FormGroup of ReactiveForms. Quelque chose comme ça.

Dans votre composant.

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

En vous HTML

<form [formGroup]="form">

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

</form>

Maintenant, vous avez le contrôle de votre FORMULAIRE pour ce faire.

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

Je sais que je suis en retard dans la fête mais cela aidera quelqu'un à l'avenir.

comme réponse donnée par @ William Aguera, je suis en train d'éditer la dernière partie de la réponse

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

Ici, je n'ai qu'à remplacer setValue par patchValue. Je l'ai souvent utilisé pour éditer des formulaires.

1
sang