单击它时如何将禁用的垫输入设置为启用？

Question

我有一个 mat-input 并且在默认情况下禁用更改文本。单击它时如何将禁用设置为启用？之后，当它失去焦点或我按下回车键时，我想再次更改为禁用状态。我可以这样做吗？

Answer 1

您可以创建一个状态变量，然后在 click 上将其分配给 input disabled 属性，然后在 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>

Answer 2

我用过这种方式，在我看来是更好的方式

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

Answer 3

这对我有用...

<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 Material 控件。只需双击输入即可启用编辑。同样的原则也适用于其他控件，例如 PrimeNG 和类似控件。

Answer 4

如果您使用的是 FormGroup，则不应禁用 HTML 模板中的表单。如果您尝试在 HTML 中与 FormControl 一起禁用，它将不起作用。相反，它应该在 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....
});

Answer 5

为什么使用语义上不正确的属性，例如对 disable 使用 readonly。响应式表单禁用了属性，您可以将其与 matInput.

一起使用

 foodCtrl: FormControl;
 disabled: boolean = true;
 ngOnInit() {
   this.foodCtrl = new FormControl({value: '', disabled: this.disabled})
 }

这里我使用了Reactive form with disable 属性，它会随着disabled 属性的变化而改变。

实例：Stackblitz

Answer 6

<input 
  matInput 
  placeholder="Email" 
  [ngModel]="data.userEmail" 
  formControlName="email" 
  readonly
/>

仅使用 readonly

Answer 7

这是禁用输入字段的更好方法...

<input matInput formControlName="description" readonly />

在输入中仅添加 readonly。

对我有用

单击它时如何将禁用的垫输入设置为启用？

How to set disabled mat-input to enabled when I click on it?

angular-material

angular

angular5