web-dev-qa-db-ja.com

クリックしたときに無効なマット入力を有効に設定するにはどうすればよいですか？

mat-inputおよびデフォルトでは、テキストの変更は無効になっています。クリックしたときに無効から有効に設定するにはどうすればよいですか？その後、フォーカスを失ったとき、またはEnterキーを押したときに、再び無効に変更したいと思います。それをしてもいいですか？

angularangular-materialangular5
6
Anonymus_goat

状態変数を作成し、それをclick、次にmouseoutイベントの入力無効化属性に割り当てることができます

<form class="example-form">
  <mat-form-field class="example-full-width" (click)="disabled=false" (mouseout)="disabled=true">
    <input matInput placeholder="Favorite food" value="Sushi"
          [attr.disabled]="disabled?'':null">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
11
Iancovici

私はこの方法を使用しました、私の意見ではより良い方法です

<input matInput placeholder="Email" [ngModel]="franchise.user_email" formControlName="email" readonly>
9
Rafael Moura

これは私にとってはうまくいきます...

<mat-form-field class="example-full-width">
     <textarea matInput cdkTextareaAutosize placeholder="Event Description" matTooltip="double-click to enable editing"
     [(ngModel)]="textareaSample" name='desc' readonly [readOnly]="readonly" (dblclick)="toggleEdit()"  ></textarea>

コンポーネントで...

 textareaSample = "Tack Spanish Main hulk deadlights man-of-war transom Jake a caulk belay.";
 readonly: boolean;

  ngOnInit(): void {
    this.readonly = true;
  }
  toggleEdit(): void {
    this.readonly = !this.readonly;
  }

そしてCSS ...

textarea { font-size: 1.2em; padding:0px;}

textarea[readonly]{ background-color: transparent;}
textarea { background-color: #eee;}

textarea[readonly]:hover {  cursor: pointer;  cursor: default; background-color: transparent }
textarea:hover { cursor: auto; background-color: #eee;}

この例では、Angularマテリアルコントロールを使用しています。入力をダブルクリックして編集できるようにしてください。PrimeNGなどの他のコントロールでも同じ原理が機能するはずです。

3
Darren Street

FormGroupを使用している場合は、HTMLテンプレートのフォームを無効にしないでください。 FormControlと共にHTMLで無効にしようとすると機能しません。代わりに、FormGroup内で実行する必要があります。これを試して：

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

そして：

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

また、大したことではありませんが、実際に行う必要があります。

public form: FormGroup;

の代わりに：

public form: any;

インポートも忘れないでください

import { FormGroup, FormControl } from '@angular/forms';

ところで、フォームグループ宣言内の名前は、HTMLで設定したものと一致する必要があります。そう：

<input formControlName="myInputName">

そして

this.form = this.fb.group({
    myInputName....
});
0
sgrillon