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(); + } }