Solución:
Necesita usar lo siguiente (Angular 4):
<input [readonly]="isReadOnly">
Si utiliza att.readonly entonces la entrada siempre será de solo lectura porque el readonly El atributo estará presente incluso si su valor es falso. Mediante el uso [readonly] Angular solo colocará el atributo si isReadOnly es verdad.
En HTML, lo siguiente es suficiente para que una entrada sea de solo lectura:
<input readonly>
Ninguno de ellos funcionó para mí .. Finalmente encontré una solución creando una directiva angular personalizada. Las directivas son una característica poderosa de angular
- Crear directiva personalizada
@Directive({
selector: '[readonly],[readOnly]',
host: {
'[attr.readonly]': '_isReadonly ? "" : null'
}
})
class ReadonlyDirective {
_isReadonly = false;
@Input() set readonly (v) {
this._isReadonly = coerceBooleanProperty(v);
};
ngOnChanges(changes) {
console.log(changes);
}
}- Agregar a las declaraciones del módulo
@NgModule({
...
declarations: [ ..., ReadonlyDirective ],
...
})3. Ahora es el momento de utilizar la directiva de la siguiente manera.
<input [(ngModel)]="name" [readonly]="isReadonly" />
or
<input [(ngModel)]="name" readonly />Las directivas son una característica poderosa de angular, le recomiendo encarecidamente que consulte https://angular.io/guide/attribute-directives
Demostración https://stackblitz.com/edit/angular-readonly-input-aifncy?file=src/app/app.component.ts
Todo depende de lo que quieras lograr. A primera vista, diría que pct. 2 es la forma más sencilla de hacerlo:
<input [attr.readonly]= "isReadOnly">
Luego, en su componente declara la variable:
isReadOnly: boolean;
Después, asigna el valor que desee:
// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;