0

im using Angular 9 + ionic. I have a condition that leaves my form as disabled, it works fine but the elements are very opaque and I need to decrease the opacity, for that I have a class to apply to the children elements of my form but apparently the css style is not being applied well.

My css:

.form-opacity-disabled .ion-label .ion-input {
   opacity: 0.8  !important;
 }

My HTML:

<form [formGroup]="myFormData"
  [class.form-opacity-disabled]="myFormData.disabled"
 (ngSubmit)="save()">

 <ion-col size="3">
    <ion-item>
      <ion-label  class="label-text">Name</ion-label> 
      <ion-input formControlName="name" ></ion-input>
    </ion-item>
  </ion-col>
</form>

i tried with myFormData.disable and "disabled" but not work

My .ts condition:

ngOnInit() {
  ....
  ....
  const disableForm = (localStorage.getItem('item') === '1'); //-> is true
  if(disableForm) {
      this.myFormData.disabled();
  }
}

How could I get the style applied to my form components?

Alonso Contreras
  • 605
  • 2
  • 12
  • 29

1 Answers1

1

If the form is invalid, angular automatically add an ng-invalid css class to the form tag. This should work :

form.ng-invalid {
  .ion-label .ion-input {
    opacity: 0.8
 }
}
Michael Desigaud
  • 2,115
  • 1
  • 15
  • 15