web-dev-qa-db-ja.com

入力フィールドのデフォルト値を変数にバインドする方法は？

私のAngularアプリのUIで特定のボタンをクリックすると、ユーザーが自分の個人情報を更新できるダイアログが開きます。簡単にするために、以下のコードを彼に制限します/ her username。つまり、ユーザーはダイアログで自分のユーザー名しか変更できないと思います。

ダイアログを開くコードは次のとおりです。

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の値に等しい入力フィールドのデフォルト値を設定する方法を誰かが知っていますか？

angulardefault-valueinput-fieldproperty-binding
7
Tommy

これは動作します。ngmodelを使用してください

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

これを行うためのより良いアプローチは、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,
});
2
William Aguera

私はパーティーで遅れていることを知っていますが、これは将来誰にでも役立つでしょう。

@ William Agueraの回答として、回答の最後の部分を編集しています

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

ここではsetValueをpatchValueに置き換えるだけです。これをフォームの編集によく使用しました。

1
sang