如何禁用angular2中的输入

Question

在ts is_edit = true禁用...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

我只是想根据true或false禁用输入。

我试过以下：

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

Answer 1

尝试使用attr.disabled，而不是disabled

<input [attr.disabled]="disabled ? '' : null"/>

Answer 2

我更喜欢这个解决方案

在HTML文件中：

<input [disabled]="dynamicVariable" id="name" type="text">

在TS文件中：

dynamicVariable = false; // true based on your condition 

Answer 3

Demo

制作boolean类型的is_edit。

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

Answer 4

而且如果输入框/按钮必须保持禁用，那么只需<button disabled>或<input disabled>工作。

Answer 5

可以简单地使用

     <input [(ngModel)]="model.name" disabled="disabled"

我是这样得到的。所以我更喜欢

Answer 6

我想我发现了问题，这个输入字段是反应形式（？）的一部分，因为你已经包含了formControlName。这意味着您通过使用is_edit禁用输入字段而尝试执行的操作无效，例如您的尝试[disabled]="is_edit"，这在其他情况下可以正常工作。使用您的表单，您需要执行以下操作：

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

并完全失去is_edit。

如果要将输入字段默认禁用，则需要将表单控件设置为：

name: [{value: '', disabled:true}]

这是一个plunker

Answer 7

你可以这么做

<input [disabled]="true" id="name" type="text">

Answer 8

<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}

Answer 9

如果要在某些语句中禁用输入。使用[readonly]=true或false而不是禁用。

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

Answer 10

我认为你的意思是false而不是'false'

此外，[disabled]期待一个Boolean。你应该避免返回null。

Answer 11

您正在寻找的是禁用=“真实”。这是一个例子：

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

Answer 12

回应Belter对上述fedtuck's accepted answer的评论的说明，因为我缺乏添加评论的声誉。

根据Mozilla docs，我所知道的任何一个都不是这样

disabled等于true或false

当disabled属性存在时，无论值如何，都禁用该元素。见this example

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>

Answer 13

---

在Angular 7中禁用TextBox

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>