禁用不工作答案

【问题标题】：Disabled not working禁用不工作
【发布时间】：2018-05-26 02:50:26
【问题描述】：

不工作：
- [disabled] = true,
- [disabled] = "isDisabled" -----ts > (isDisabled=true)
- 基本的 html 禁用程序也无法正常工作 ----html > disable
- [attr.disabled] = true,
- [attr.disabled] = "isDisabled" -----ts > (isDisabled=true)

我正在尝试为预览和更新制作相同的表单（预览应该禁用输入），但我在 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">

和打字稿功能和属性

isDisabled = true;

onSelect(o: Osoba, isView) {
    this.isDisabled = isView;
    console.log(document.getElementById('ime'));
    console.log(this.isDisabled);
    this.selectedOsoba = o;
}

this.isDisabled 的日志有效

但是元素的日志甚至没有禁用属性

<input _ngcontent-c5="" id="ime" name="ime" type="text" ng-reflect-name="ime" ng-reflect-model="Dusan     " class="ng-untouched ng-pristine ng-valid">

这是整个 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>

表单外的输入正常，但表单和 div 中的所有输入都不起作用有什么问题？

【问题讨论】：

尝试 [attr.disabled] = "isDisabled"
已经试过了
这样尝试过，但看起来文本荧光笔不一样，也许这是一个线索
prntscr.com/hmfkec
@АлексаЈевтић 您的代码应该可以工作。 log 语句包含 id 并且您的 HTML 没有 id 设置它是如何记录的？

标签： angular typescript data-binding

【解决方案1】：

使用attr.disabled 时，您必须提供文字值，或者完全省略该属性。请记住，HTML 中的 disabled 属性仅通过存在即可禁用支持该属性的元素。

<input [(ngModel)]="osoba.ime" [attr.disabled]="disabled?'':null" name="ime" type="text" id="ime">

HTML 中的以下两项都应该导致输入被禁用...

<input disabled />
<input disabled="disabled" />

【讨论】：

【解决方案2】：

使用这个：

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

【讨论】：

【解决方案3】：

在响应式表单创建中，您可以添加如下

this.form= this.formBuilder.group({
      name: [{value: '', **disabled**: **true**}],
    });

表单值将被禁用

【讨论】：