css - 禁用表单时将类应用于表单元素Angular - Ionic

Question

我正在使用 Angular 9 + 离子。我有一个条件使我的表单处于禁用状态，它工作正常，但元素非常不透明，我需要降低不透明度，因为我有一个类可以应用于我的表单的子元素，但显然 css 样式不是被很好地应用。

我的CSS：

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

我的 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>

我尝试使用 myFormData.disable 和“禁用”但不起作用

我的 .ts 条件：

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

如何将样式应用于我的表单组件？

标签： cssangularionic-frameworkopacity

Answer 1

如果表单无效，Angular 会自动为标签添加一个ng-invalidcss 类。form这应该工作：

form.ng-invalid {
  .ion-label .ion-input {
    opacity: 0.8
 }
}