typescript 禁用不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47772278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabled not working
提问by Алекса ?евти?
- Not working :
[disabled] = true,[disabled] = "isDisabled"-----ts > ( isDisabled=true)- basic html disabler also not wokring ----html >
disable [attr.disabled] = true,[attr.disabled] = "isDisabled"-----ts > (isDisabled=true)
- 不工作：
[disabled] = true,[disabled] = "isDisabled"-----ts > ( isDisabled=true)- 基本的 html 禁用程序也不能工作 ----html >
disable [attr.disabled] = true,[attr.disabled] = "isDisabled"-----ts > (isDisabled=true)
I'm trying to make same form for preview and update (preview should have disabled inputs), but my input in html fails to bind to typescript boolean. In html I have a table with person.name, person.surname .... button(preview), button(update) both triggering the onSelect function and sending person + true/false.
我正在尝试为预览和更新制作相同的表单（预览应该禁用输入），但是我在 html 中的输入无法绑定到 typescript 布尔值。在 html 中，我有一个表，其中包含 person.name、person.surname .... button(preview), button(update) 都触发 onSelect 函数并发送 person + true/false。
<input [(ngModel)]="osoba.ime" [attr.disabled]="isDisabled" name = "ime" type="text" id="ime">
and typescript function and property
和打字稿功能和属性
isDisabled = true;
onSelect(o: Osoba, isView) {
this.isDisabled = isView;
console.log(document.getElementById('ime'));
console.log(this.isDisabled);
this.selectedOsoba = o;
}
log of this.isDisabled is valid
this.isDisabled 的日志是有效的
but log of the element doesn't even have disabled property
但元素的日志甚至没有禁用属性
<input _ngcontent-c5="" id="ime" name="ime" type="text" ng-reflect-name="ime" ng-reflect-model="Dusan " class="ng-untouched ng-pristine ng-valid">
here's the whole html code
这是整个 html 代码
<form *ngIf="osoba">
<div class="input">
<label>Ime Osobe</label>
<input [disabled]= "isDisabled" [(ngModel)]="osoba.ime" name = "ime" type="text" id="ime">
</div>
<div class = "input">
<label >Prezime Osobe</label>
<input [(ngModel)]="osoba.prezime" name = "prezime" type="text" id = "prezime" [disabled] = "isDisabled">
</div>
<div >
<label >Jmbg Osobe </label>
<input [(ngModel)]="osoba.jmbg" name = "jmbg" type="text" [attr.disabled]= true >
</div>
<div class="input">
<input type="submit" value="izmeni" (click)="updateOsoba()">
</div>
</form>
<input id="disabledTest" type="text" value="nekiTekst" [disabled]= true>
the input which is out of the form is working , but all inputs in form and divs not working what's the catch ?
表单外的输入正在工作，但表单和 div 中的所有输入都不起作用，有什么问题？
回答by Fenton
When using attr.disabled, you have to supply the literal value, or omit the attribute altogether. Bear in mind that the disabled attribute in HTML disables an element that supports the attribute simply by being present.
使用时attr.disabled，您必须提供文字值，或者完全省略该属性。请记住，HTML 中的 disabled 属性仅通过出现就禁用了支持该属性的元素。
<input [(ngModel)]="osoba.ime" [attr.disabled]="disabled?'':null" name="ime" type="text" id="ime">
Both of the following in HTML should result in an input being disabled...
HTML 中的以下两项都应导致输入被禁用...
<input disabled />
<input disabled="disabled" />
回答by Abhishek Gautam
Use this :
用这个 ：
<input
type="radio"
id="primaryIPV6"
value="2"
[attr.disabled]="flagValue ? '' : null"
formControlName="p_ip_type"
(change)="optionalFn()">
回答by shuaib
In the reactive form creation, you can add as below
在响应式表单创建中，您可以添加如下
this.form= this.formBuilder.group({
name: [{value: '', **disabled**: **true**}],
});
the form value will be disbaled
表单值将被取消
