12

在我的 Angular 应用程序的 UI 中单击某个按钮时，会打开一个对话框，用户可以在其中更新他/她的个人信息。为简单起见，我将以下代码限制为他/她的用户名。也就是说，我假设用户只能在对话框中更改他/她的用户名。

打开对话框的代码如下：

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 的值（传递给对话框）？

4

4 回答 4

15

我认为更好的方法是使用 ReactiveForms 模块的 FormGroup。像这样的东西。

在你的组件中。

 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>

现在，您可以控制您的 FORM 来执行此操作。

this.form.setValue({
  userName: YOUR_VALUE,
});
于 2018-06-15T03:56:33.863 回答
8

这将工作，使用ngmodel

<input matInput
[(ngModel)]="data.username" 
#userName="ngModel" 
name="userName" 
type="text" 
required>
于 2018-06-15T06:17:45.123 回答
6

如果您不想使用 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() {

  }
于 2020-01-24T12:11:29.713 回答
5

我知道我在聚会上迟到了，但这将对将来的任何人有所帮助。

作为@William Aguera给出的答案，我只是在编辑答案的最后一部分

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

在这里，我只 用patchValue替换了setValue。我经常在编辑表格时使用它。

于 2019-08-05T12:54:06.440 回答