Carlos Cifuentes
AngularJS → Angular reference

ng-disabled / ng-readonly / ng-checked in modern Angular

These directives become plain property bindings. Angular sets the DOM property, and a false value turns it off.

Before · AngularJS
<button ng-disabled="vm.form.$invalid || vm.saving">Save</button>
<input ng-model="vm.code" ng-readonly="!vm.editable">
<input type="checkbox" ng-checked="vm.allSelected" ng-click="vm.toggleAll()">
<input ng-model="vm.name" ng-disabled="vm.locked">
After · Angular
<button [disabled]="form.invalid || saving()">Save</button>
<input [formControl]="code" [readOnly]="!editable()" />
<input type="checkbox" [checked]="allSelected()" (change)="toggleAll()" />
<input [formControl]="name" />

// component: reactive controls are disabled from code
constructor() {
  effect(() => (this.locked() ? this.name.disable() : this.name.enable()));
}

What changes

  • ng-disabled, ng-readonly and ng-checked become [disabled], [readOnly] and [checked].
  • Attributes without a matching DOM property, such as aria-expanded, use [attr.aria-expanded]; a null value removes the attribute.
  • Reactive form controls are disabled from code with control.disable() and control.enable(); [disabled] next to formControl logs a warning.

Migration tip. A disabled reactive control is left out of form.value. If the backend expects those fields, read the form with getRawValue().

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn