ng-disabled / ng-readonly / ng-checked en Angular moderno

Estas directivas pasan a ser bindings de propiedad comunes. Angular asigna la propiedad del DOM, y un valor false la desactiva.

Antes · 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">

Después · 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()));
}

Qué cambia

ng-disabled, ng-readonly y ng-checked pasan a ser [disabled], [readOnly] y [checked].
Los atributos sin propiedad equivalente en el DOM, como aria-expanded, usan [attr.aria-expanded]; un valor null quita el atributo.
Los controles de formularios reactivos se deshabilitan desde código con control.disable() y control.enable(); [disabled] junto a formControl genera una advertencia.

Consejo de migración. Un control reactivo deshabilitado queda fuera de form.value. Si el backend espera esos campos, lee el formulario con getRawValue().

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn