如何禁用角度2的输入

小开

我猜你说的是 false而不是 'false'

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

小开

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

小开

我想我找到问题所在了，这个输入域是反应形式的一部分(?)，因为你已经包括 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}]

这是 雷尔 = “ norefrer”> Plunker

小开

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

小开

最佳答案

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

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

小开

你要找的是 = “ true”。这里有一个例子:

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

小开

这是对小行星带人对 Fedtuck 接受了这个答案的评论的回应，因为我缺乏添加评论的声誉。

这是不正确的，我知道的任何一个，根据 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"/>

小开

你可以简单地这样做

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

小开

禁用角度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>工作。

小开

我更喜欢这个解决方案

在 HTML 文件中:

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

在 TS 档案中:

dynamicVariable = false; // true based on your condition

小开

可以简单地使用

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

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

小开

在角度9中禁用 Select。

有一件事要记住，禁用 boolean值的工作在这个例子中，我使用的 (change)事件与 select选项，如果国家没有选择区域将被禁用。

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


}

寻找. 组件. 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属性，禁用的属性实际上将在 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