Comment désactiver un input dans Angular ?
Lorsqu'on développe en utilisant le framework Angular, il est nécessaire de revoir sa façon d'écrire un formulaire. Le framework possède en effet ses propres notations pour le HTML et le JavaScript. Il existe différentes techniques pour désactiver un élément. On manipule toujours l'attribut "disabled" de l'élément HTML.
Pour modifier avec Angular cet attribut, on utilise la propriété "attr.disabled". Le préfixe "attr" est utilisé dans la notation d'Angular pour manipuler les attributs. Dans cet exemple, la variable "desactive" contient un booléen. Si la valeur de l'attribut est fixée à une chaîne vide, l'élément sera désactivé. Si c'est la valeur "null", alors l'élément n'est pas désactivé.
<input [attr.disabled]="disabled ? '' : null"/>
Si vous utilisez le module ReactiveForm dans votre application, la déclaration de l'attribut est légèrement différente. Elle est effectuée grâce à la propriété "disabled" dans la fonction JavaScript qui crée le formulaire.
monElement: [{value: '', disabled:true}]
Pour désactiver ou activer un élément, on doit d'abord récupérer l'élément. Il faut pour cela utiliser la méthode "get()" de l'attribut "myForm", qui contient le formulaire instancié. Le paramètre correspond au nom de l'élément HTML.
let input = this.myForm.get('monElement')
Il suffit ensuite d'utiliser la fonction "enable()" pour activer un élément déjà désactivé ou "disable()" si vous souhaitez le désactiver.
//Désactive l'élément HTML input.disable(); //Active l'élément HTML input.enable();