如何解决禁用表单时将类应用于表单元素 Angular - Ionic
我使用的是 Angular 9 + ionic。我有一个条件使我的表单处于禁用状态,它工作正常,但元素非常不透明,我需要降低不透明度,因为我有一个类可以应用于表单的子元素,但显然 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();
}
}
如何将样式应用于我的表单组件?
解决方法
如果表单无效,angular 会自动在 ng-invalid
标签中添加一个 form
css 类。这应该有效:
form.ng-invalid {
.ion-label .ion-input {
opacity: 0.8
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。