如何禁用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">

我只是想基于true或禁用输入false。

我尝试了以下操作：

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

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

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

我想我已经解决了这个问题，因为您已经包含，所以此输入字段是反应形式（？）的一部分formControlName。这意味着您要通过禁用输入字段来尝试执行的操作is_edit不起作用，例如您的try [disabled]="is_edit"可能在其他情况下有效。使用表格，您需要执行以下操作：

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

并is_edit完全失去。

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

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

这是一个小矮人

你可以简单地做到这一点

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

<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}

我想你的意思false不是'false'

此外，[disabled]正在期待Boolean。您应该避免返回null。

由于我不具备添加评论的美誉，因此回应了贝尔特对联邦快递在上面接受的答案的评论。

根据Mozilla文档，对于我所知的任何情况，这都是不正确的

禁用等于真或假

存在禁用属性时，无论值如何，该元素均被禁用。看这个例子

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

我更喜欢这种解决方案

在HTML文件中：

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

在TS文件中：

dynamicVariable = false; // true based on your condition 

您正在寻找的是disabled =“ true”。这是一个例子：

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

演示版

使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;
  }
}

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

并且如果输入框/按钮必须保持禁用状态，则简单 <button disabled>或<input disabled>可行。

Select在角度9中已禁用。

请记住，boolean在此示例中禁用了使用值的操作，如果未选择国家/地区，则我将(change)事件与select选项一起使用。

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>

可以简单地使用

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

我是这样子的。所以我更喜欢。