在 tsis_edit = true中禁用...
<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">
我只是想禁用基于trueor的输入false。
我试过以下：
[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
尝试使用attr.disabled, 而不是disabled
<input [attr.disabled]="disabled ? '' : null"/>
如果您想在某些语句上禁用输入。使用[readonly]=trueorfalse而不是禁用。
<input [readonly]="this.isEditable"
type="text"
formControlName="reporteeName"
class="form-control"
placeholder="Enter Name" required>
我想我找到了问题所在，这个输入字段是响应式表单（？）的一部分，因为你已经包含了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}]
这是一个笨蛋
你可以简单地这样做
<input [disabled]="true" id="name" type="text">
<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.
回应贝尔特对上述fedtuck 已接受答案的评论的注释，因为我缺乏添加评论的声誉。
根据Mozilla 文档，这对于我所知道的任何一个都不是真的
disabled 等于 true 或 false
当 disabled 属性存在时，无论值如何，元素都会被禁用。看这个例子
<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
布尔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;
}
}
您正在寻找的是disabled="true"。这是一个例子：
<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
在 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>
实际上，当前使用响应式表单时推荐的方法（为了避免“检查后更改”错误）是不要将 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)]],
});
}
这是一个带有工作代码的插件： http ://plnkr.co/edit/SQjxKBfvvUk2uAIb?preview
Select在 Angular 9 中禁用。
在此示例中，请记住禁用值的工作，如果未选择国家/地区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>
而且，如果输入框/按钮必须保持禁用状态，那么简单
<button disabled>或<input disabled>有效。
可以简单地使用
<input [(ngModel)]="model.name" disabled="disabled"
我是这样弄的。所以我更喜欢。