在使用反应性表单角成功提交表单时删除CSS
在使用反应性表单角成功提交表单时删除CSS
提问于 2022-07-08 08:23:25
在成功提交表单时，我试图从元素中删除下面的CSS。我目前在角中使用反应性形式，如果值无效，我使用下面的CSS显示红色左边框和粗体字体。
.form-control.ng-dirty:not(form) {
font-weight: bolder;
border-left: 5px solid #42A948; /*green*/
}
.form-control.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}当我单击“保存”时，我希望删除css (通过将字体更改为“更大胆”，将左边框改为“绿色”来向用户显示当前值正在更新)。我有点纠结于此。我试过使用temp变量，但这不起作用。尝试从$event变量中传递onSubmit，但这也没有帮助。
<form [formGroup]="formEquipments" (ngSubmit)="onSubmit(formEquipments, $event)">
<table class="tableInfo">
<thead *ngIf="parameterModels?.length > 0">
<tr>
<th style="padding-left:30px" *ngFor="let paramType of solverParameterHeader; let i = index">
<div class="tableheaders">
{{paramType}}
</div>
</th>
</tr>
</thead>
<tbody>
<ng-container formArrayName="equipmentArray"
*ngFor="let paramTypes of formEquipments.get('equipmentArray')['controls']; let i = index">
<tr [formGroupName]="i">
<td formArrayName="entityAttributeInfo" *ngFor="let item of paramTypes.controls.entityAttributeInfo.controls; let ii = index;">
<div [formGroupName]="ii" class="tabledataEquipmentNameInfo">
<input #varData formControlName="value" class="form-control">
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
</form>类型标
async onSubmit(formGroup, target) {
//remove the css after successful submission of the form.
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-10 07:13:02
所以，在玩了$event之后，我终于找到了解决方案。以下是我所用的：
@ViewChild('data') data: ElementRef;
divElement: HTMLElement;然后在提交事件上：
async onSubmit(formGroup, target) {
this.divElement = this.data.nativeElement;
this.divElement.classList.remove("ng-dirty");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72908632
复制相关文章
相似问题
腾讯云开发者
