diff --git a/src/app/pages/settings/chains/chain-form/chain-form.html b/src/app/pages/settings/chains/chain-form/chain-form.html
index 5b91906..75fa3aa 100644
--- a/src/app/pages/settings/chains/chain-form/chain-form.html
+++ b/src/app/pages/settings/chains/chain-form/chain-form.html
@@ -4,5 +4,5 @@
{{'common.name'|translate|upperfirst}}
-
+
\ No newline at end of file
diff --git a/src/app/pages/settings/chains/chain-form/chain-form.ts b/src/app/pages/settings/chains/chain-form/chain-form.ts
index d369b74..b0e02c2 100644
--- a/src/app/pages/settings/chains/chain-form/chain-form.ts
+++ b/src/app/pages/settings/chains/chain-form/chain-form.ts
@@ -1,28 +1,44 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, input, OnDestroy, OnInit } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ImageUploader } from '../../../../components/image-uploader/image-uploader';
import { ReactiveFormsModule } from '@angular/forms';
import { ChainFormGroup } from '../chain-formgroup';
import { TranslatePipe } from '@ngx-translate/core';
-import { UpperfirstPipe } from "../../../../pipes/upperfirst-pipe";
+import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
+import { Subscription } from 'rxjs';
@Component({
selector: 'app-chain-form',
- imports: [MatFormFieldModule, MatInputModule, ImageUploader, ReactiveFormsModule, TranslatePipe, UpperfirstPipe],
+ imports: [
+ ImageUploader,
+ MatFormFieldModule,
+ MatInputModule,
+ ReactiveFormsModule,
+ TranslatePipe,
+ UpperfirstPipe,
+ ],
templateUrl: './chain-form.html',
styles: ``,
})
-export class ChainForm {
- form = input(new ChainFormGroup())
-
- get file() {
- return this.form().controls.image.value;
+export class ChainForm implements OnInit, OnDestroy {
+ form = input(new ChainFormGroup());
+ private readonly cd = inject(ChangeDetectorRef);
+ private imageSubscription?: Subscription;
+
+ ngOnInit() {
+ this.imageSubscription = this.form().controls.image.valueChanges.subscribe({
+ next: () => this.cd.detectChanges(),
+ });
}
-
+
updateFileImage(file: File) {
const form = this.form();
form.controls.image.patchValue(file);
form.controls.image.markAsDirty();
}
+
+ ngOnDestroy() {
+ this.imageSubscription?.unsubscribe();
+ }
}