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

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

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

Answer 2

Demo

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

我想我找到了问题所在，这个输入字段是反应形式的一部分 (?)，因为您已经包含 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 4

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

Answer 5

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

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

Answer 6

您要找的是disabled="true"。这是一个例子：

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

Answer 7

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

据我所知，这与 Mozilla docs

相符

disabled equals to true or 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 8

你可以简单地这样做

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

Answer 9

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

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

Answer 10

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

Answer 11

而且如果输入 box/button 必须保持禁用状态，那么只需 <button disabled> 或 <input disabled> 有效。

Answer 12

我更喜欢这个解决方案

在 HTML 文件中：

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

在 TS 文件中：

dynamicVariable = false; // true based on your condition

Answer 13

可以简单地使用like

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

我是这样理解的。所以我更喜欢。

Answer 14

在 angular 9.

中禁用 Select

请记住禁用 boolean 值的工作在此示例中，如果未选择国家/地区，我将使用带有 select 选项的 (change) 事件，区域将被禁用。

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>

Answer 15

实际上，在使用 反应式表单 时（为了避免 'changed after checked' 错误），目前推荐的方法是不使用带有反应式表单指令的 disabled 属性。您应该在您的组件 class 中设置此控件的 disabled 属性并且禁用属性实际上会在 DOM 中为您设置。

<div>
      <form [formGroup]="form">
    <p>
        <input matInput type="text" placeholder="Name" formControlName="name"/>
    </p>
    </form>
</div>

和组件代码：

form: FormGroup;
  public is_edit: boolean = true;
  constructor(
    private fb: FormBuilder
    ) {
    
  }

  ngOnInit() {
    this.form = this.fb.group({
      name: [{value: '', disabled: !this.is_edit}, [Validators.required, Validators.minLength(2)]],
    });
  }

这是一个带有工作代码的插件： http://plnkr.co/edit/SQjxKBfvvUk2uAIb?preview

如何禁用angular2中的输入

How to disable a input in angular2

disabled-input

angular

angular-reactive-forms