如何禁用angular2中的输入

在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">

---

我猜你的意思是

false

而不是

'false'

另外，

[disabled]

需要一个

布尔值。您应该避免返回
null

make
是布尔类型的_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;
  }
}


导出类应用程序{
名称：字符串；
is_edit：布尔值；
构造函数（）{
this.name='Angular2'
this.is_edit=true；
}
}
我想我已经解决了这个问题，这个输入字段是反应式表单（？）的一部分，因为您已经包含了
formControlName
。这意味着，您试图通过使用
is_edit
禁用输入字段来执行的操作不起作用，例如，您的尝试
[disabled]=“is_edit”
，在其他情况下会起作用。在表单中，您需要执行以下操作：

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

并将
is\u edit
全部丢失

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

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

这里有一个

更改输入状态
导出类AppComponent{
is_edit:boolean=false；
}
尝试使用
attr.disabled
，而不是
disabled

您要查找的是禁用的=“true”。以下是一个例子：

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

这是对贝尔特对上述评论的回应，因为我缺乏添加评论的声誉

据我所知，这一点并不符合

disabled等于true或false

当存在disabled属性时，无论值是多少，元素都将被禁用。看

您可以简单地执行此操作

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

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

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



禁用Angular 7中的文本框

<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>


电子邮件

如果输入框/按钮必须保持禁用状态，则只需
或
有效。
我更喜欢这种解决方案

在HTML文件中：

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

可以简单地使用

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

禁用
选择角度9中的

有一件事要记住：禁用的对象使用
布尔值
在本例中，我使用
（更改）
事件和
选择
选项，如果未选择国家/地区，则区域将被禁用

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

find.component.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>

//国家/地区选择选项
选择一个国家
美国
//区域已禁用，直到未选择国家/地区
选择一个地区
任何地区。
实际上，在使用反应式表单时，当前推荐的方法（为了避免“选中后更改”错误）是不将禁用属性与反应式表单指令一起使用。
您应该在组件类中设置该控件的
disabled
属性，并且disabled属性实际上将在DOM中为您设置





以及组件代码：

形式：FormGroup；
public is_edit:boolean=true；
建造师(
私人fb:FormBuilder
) {
}
恩戈尼尼特（）{
this.form=this.fb.group({
名称：[{value:''，已禁用：！this.is_edit}，[Validators.required，Validators.minLength（2）]，
});
}

这是一个带有工作代码的plunker：
您已经问了这个问题，并且已经有了答案，但随后删除了该问题。同样，打开浏览器控制台来注意错误，修复它们（即使用name而不是formControlName），然后，它就可以工作了：这里真正的问题是，您将基于模板的表单与反应式表单混合在一起。使用其中一个，而不是两个@AJT_82的答案是正确的。将attr value设置为null以避免将attr添加到元素中-看起来像是一个黑客攻击-但事后来看，它实际上是有效的，甚至是有意义的。
disabled
等于
true
或
false
感谢您给出了一个真正有效的答案！那么为什么
attr.disabled
在
disabled
不起作用的情况下起作用呢？虽然这起作用，但它并没有解决将基于模板的表单与被动表单混合的真正问题。OP应该使用其中一个，而不是两个。我认为work也适用于纯Html，并且完全适用于纯Html，但对于angular，您必须为disabled提供布尔值，尤其是在进行双向绑定时。这是错误的，Html和DOM
disabled
属性是“布尔属性”这意味着只需要指定属性名，或者其值必须等于
disabled
，例如
disabled=“disabled”-它不识别
true`或
false
-因此
disabled=“false”
仍将导致元素被禁用。在这起作用时，它建议使用“false”将启用控件，但它不启用，因为禁用属性的存在是禁用控件的原因，而不是值。@Mecaveli，将[disabled]设置为false实际上启用控件。使输入字段处于启用状态。你可以检查一下你的angular应用程序。在这里纠正我自己：据我所知，[disabled]实际上并不像[attr.disabled]那样控制“disabled”html属性值。因此，[disabled]=“false”起作用，尽管html属性“disable”的值为“false”则不起作用。因此，在提出计数器点之前，您应该实际使用编辑器并试用它。确实，很抱歉，很遗憾，现在无法撤消它。多年来一直错误使用[attr.disabled]，认为（或者说没有太多想法）它等于[disabled]……如果将控制台日志放在isDisabled方法中，那么有数百个控制台日志是
     <input [(ngModel)]="model.name" disabled="disabled"

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>