Menu
[disabled] = true ,[disabled] = "isDisabled" -----ts > ( isDisabled=true)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 ?
363
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 .
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.
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.
disabled is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled.
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" />
Use this :
<input
type="radio"
id="primaryIPV6"
value="2"
[attr.disabled]="flagValue ? '' : null"
formControlName="p_ip_type"
(change)="optionalFn()">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With