Disabled not working

Question

1. 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)

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.

<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

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

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

Solution 1

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.

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

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

Solution 2

Use this :

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

Solution 3

In the reactive form creation, you can add as below

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

the form value will be disabled