如何禁用angular2中的输入

Posted 2023-02-22

【中文标题】如何禁用angular2中的输入

【英文标题】：How to disable a input in angular2

【发布时间】：2017-06-29 23:14:33

【问题描述】：

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

【问题讨论】：

您已经问过这个问题，并且已经得到了答案，但后来删除了这个问题。再次，打开浏览器控制台以注意错误，修复它们（即使用名称而不是 formControlName），然后它就可以工作了：plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview

这里真正的问题是您将基于模板的表单与反应式表单混合在一起。使用其中之一，而不是两者。 @AJT_82 有正确答案。

【参考方案1】：

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

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

【讨论】：

将 attr 值设置为 null 以便不将 attr 添加到元素 - 看起来像一个 hack - 但事后看来，它确实有效，甚至有意义。

disabled 等于 true 或 false

感谢您提供真正有效的答案！那么为什么attr.disabled 可以工作而disabled 不行呢？

虽然这行得通，但它是一个 hack，并没有解决将基于模板的表单与反应式表单混合的真正问题。 OP 应该使用其中之一，而不是两者。

我觉得也可以

【参考方案2】：

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

【参考方案3】：

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

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

【讨论】：

反应友好的解决方案。

这是正确的。对我来说 [attr.disabled]="disabled" 只能单向工作，即输入保持在初始禁用/启用状态

非常感谢！

Nazir没问题

【参考方案4】：

你可以这样做

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

【讨论】：

虽然这可行，但它表明“false”将启用控件，但它不会启用该控件，因为 disabled 属性的存在是禁用控件的原因，而不是值。

@Mecaveli，将 [disabled] 设置为 false 实际上会启用控件。 启用输入字段。您可以检查您的 Angular 应用程序。

只是在这里纠正自己：据我所知，[disabled] 实际上并不像 [attr.disabled] 那样控制“禁用”html 属性值。因此，[disabled]="false" 有效，尽管 "false" 作为 html 属性 "disable" 的值不会。

所以总而言之，在提出反点之前，您应该实际使用您的编辑器并尝试一下。

确实，很抱歉投反对票，很遗憾现在无法撤消。多年来一直在滥用 [attr.disabled]（或者说没有太多思考）它等于 [disabled]...

【参考方案5】：

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

【讨论】：

如果将控制台日志放在isDisabled方法中，则会执行数百个控制台日志。如果 isDisabled 方法中存在复杂的逻辑，则可能会出现问题。所以我不确定这是一个好的解决方案。

不要将动态检查放入 Angular 变量中，否则会出现无限循环。您可以直接使用[disabled]="is_edit"。为什么是isDisabled() 函数？

【参考方案6】：

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

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

【参考方案7】：

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

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

禁用等于真或假

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

【讨论】：

这对于纯 Html 是正确的并且完全正确，但是对于 Angular，您必须为 disabled 提供一个布尔值，尤其是当您进行双向绑定时。

【参考方案8】：

我更喜欢这个解决方案

在 HTML 文件中：

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

在 TS 文件中：

dynamicVariable = false; // true based on your condition 

【参考方案9】：

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;
  

【参考方案10】：

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

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

【讨论】：

这是不正确的，HTML 和 DOM 的 disabled 属性是一个“布尔属性”，这意味着只需要指定属性名称 - 或者它的值必须等于 disabled，例如disabled="disabled" - it does not recognize the values of true` 或 false - 所以 disabled="false" 仍然会导致元素被禁用。

【参考方案11】：

---

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

【参考方案12】：

在角度 9 中禁用 Select。

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

查找.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>

【参考方案13】：

实际上，当前在使用 反应式表单 时推荐的方法（为了避免“检查后更改”错误）是不要将 disabled 属性与反应式表单指令一起使用。 你应该在你的组件类中设置这个控件的disabled属性，并且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)]],
    );
  

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

【参考方案14】：

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

【参考方案15】：

可以简单地使用

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

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

【讨论】：

这不是动态设置 disabled 属性