Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disabled not working

  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 ?

like image 363
Алекса Јевтић Avatar asked Dec 12 '17 12:12

Алекса Јевтић


People also ask

How does disabled work in angular?

The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .

What is the opposite of disabled in html?

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

What is disabled in html?

The disabled attribute in HTML indicates whether the element is disabled or not. If this attribute is set, the element is disabled. The disabled attribute is usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused. It is a boolean attribute.

Is disabled a boolean?

disabled is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled.


2 Answers

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" />
like image 103
Fenton Avatar answered Sep 20 '22 12:09

Fenton


Use this :

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">
like image 42
Abhishek Gautam Avatar answered Sep 18 '22 12:09

Abhishek Gautam