Как привязать значение по умолчанию поля ввода к переменной?

Question

При нажатии определенной кнопки в пользовательском интерфейсе моего приложения Angular открывается диалоговое окно, в котором пользователь может обновить свою личную информацию. Для простоты я ограничиваю следующий код его / ее именем пользователя. То есть я предполагаю, что пользователь может изменить только свое имя пользователя в диалоговом окне.

Код, открывающий диалоговое окно, выглядит следующим образом:

openDialog() {

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

 }

Файл update-personal-data.component.ts выглядит следующим образом:

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

  }

}

Файл update-personal-data.component.html на данный момент выглядит следующим образом:

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

Как видите, я хочу установить значение по умолчанию для поля ввода, равное старому имени пользователя, используя следующий код:

value="{{data.username}}"

Тем не менее, это не работает. Поле ввода пустое. Я также попробовал несколько других методов (например, [value]="{{data.username}}"), но ничего не получалось. Кто-нибудь знает, как установить значение по умолчанию для поля ввода, равное значению переменной data.username (которое было передано в диалог)?

Answer 1

Я думаю, что лучший подход для этого - использовать FormGroup модуля ReactiveForms. Что-то вроде этого.

В твоем компоненте.

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

В тебе HTML

<form [formGroup]="form">

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

</form>

Теперь у вас есть контроль над своей формой, чтобы сделать это.

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

Answer 2

Это будет работать, используйте ngmodel

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

Answer 3

Если вы не хотите использовать formGroup, просто используйте следующее в своем HTML <input>

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

И ваш компонент:

export class UpdatePersonalDataComponent implements OnInit {

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

    this.username = data.username;

  }

  ngOnInit() {

  }

Answer 4

Я знаю, что опаздываю на вечеринку, но это поможет любому в будущем.

как ответ @William Aguera, я просто редактирую последнюю часть ответа

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

Здесь мне нужно только заменить setValue на patchValue. Я часто использовал это при редактировании форм.

Answer 5

Попробуй это:

1. Привязать входное значение к некоторой переменной в вашем файле.ts как:

   let inputValue = 'defaultValue';

2. и в HTML добавить это:

   [value]="inputValue"

3. добавьте к своему элементу ввода в html-файл вызов метода updateInputElement (или другого имени), когда входные данные изменятся следующим образом:

   (input) = updateInputElement(element);

4. Ваш HTML должен выглядеть так:

   <input autocomplete="off" required matInput formControlName="userName" placeholder="Username" (input) = updateInputElement($event) [value]="inputValue">

5. в файле.ts обновите значение ввода как следующее:

   updateInputElement($event) { this.inputValue = $event.target.value; }

УДАЧИ!!