Some order with formControlName

.vscode/launch.json

@@ -7,8 +7,7 @@
       "name": "ng serve",
       "type": "chrome",
       "request": "launch",
-      "preLaunchTask": "npm: start",
+       "url": "http://localhost:4200/"
-      "url": "http://localhost:4201/"
     },
     {
       "name": "ng test",

angular.json

@@ -62,7 +62,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "port": 4201,
+            "port": 4200,
             "host": "0.0.0.0"
          },
           "configurations": {

src/app/asset-calculator/asset-calculator.component.html

@@ -12,8 +12,7 @@
                     <label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label>
                 </div>
                 <div class="col col-lg">
-                    <input class="form-control" formControlName="initialValueAsset"  [(ngModel)]=initialValueAsset 
+                    <input class="form-control" formControlName="initialValueAsset" type="number"  id="initialValueAsset"  required >
-                            type="number"  id="initialValueAsset"  required >
                 
                     @if(assetsDepreciationFormGroup.get('initialValueSet')?.invalid && assetsDepreciationFormGroup.get('initialValueSet')?.touched){
                         <div class="text-danger col-auto"> Wartość niepoprawna!. Podaj kwotę w zł np 3000.05 (czyli 3000 zł i 5 gr)</div>
@@ -28,8 +27,7 @@
                     <label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label>
                 </div>   
                 <div class="col-3 col-lg-3">
-                    <input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate
+                    <input class="form-control" formControlName="depreciationRate"   type="number" id="depreciationRate"  /> 
-                        type="number" id="depreciationRate"  /> 
                 </div>
                 <div class="col-1 col-lg-1 text-start">
                 <label for="depreciationRate">%</label>
@@ -41,7 +39,7 @@
                     <label class="form-label">Rozpoczęcie amortyzacji:</label>
                 </div>
                 <div class="col-7 col-lg-6">
-                    <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month"	[(ngModel)]=year_month placeholder="2024" />
+                    <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month"	placeholder="2024" />
     
                 </div>
 
@@ -52,20 +50,20 @@
                     <label class="form-label">Metoda amortyzacji:</label>
                 </div>
                 <div class="col col-lg" >
-                    <select class="form-select" formControlName="typeDepreciation"  [(ngModel)]=typeDepreciation  >                           
+                    <select class="form-select" formControlName="typeDepreciation"   >                           
                         <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
                         <option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
                     </select>
                 </div>
             </div>
 
-            @if( TypeDepreciation.digressive === typeDepreciation()  ){
+            @if( TypeDepreciation.digressive ===  assetsDepreciationFormGroup.get( 'typeDepreciation'  )?.value ) {
                 <div class="form-group row align-items-center"> 
                     <div class="col-5 col-lg text-start ">         
                     <label for="factorValue" class="form-label">Wspólczynnki degresji</label>
                     </div>
                     <div class="col col-lg" >
-                        <input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue   />
+                        <input type="text" class="form-control" formControlName="factorValue"  />
                     </div>
                 </div>
             }

src/app/asset-calculator/asset-calculator.component.ts

@@ -1,40 +1,39 @@
-import {Component,  effect, OnInit, signal } from '@angular/core';
+import {Component,  effect, OnInit, OnDestroy, signal } from '@angular/core';
 import {ReactiveFormsModule,  FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
-import {CurrencyPipe,DecimalPipe,PercentPipe, NgFor} from '@angular/common';
+import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
 
 
 import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange } from './assets/asset';
 import {AssetService} from './assets/service/asset.service'
 
+
+interface FormValues {
+	initialValueAsset: number;
+	depreciationRate: number;
+	year_month: string;
+	typeDepreciation: TypeDepreciation;
+	factorValue: number;
+}
   @Component({
 	selector: 'app-asset-calculator',
 	standalone: true,
-  imports: [ CurrencyPipe, DecimalPipe, PercentPipe,  ReactiveFormsModule, NgFor ] ,
+	imports: [ CurrencyPipe, DecimalPipe, PercentPipe,  ReactiveFormsModule ] ,
 	templateUrl: "asset-calculator.component.html",
 	styleUrl: 'asset-calculator.component.css'
   })
-export class AssetCalculatorComponent implements OnInit{
+  export class AssetCalculatorComponent implements OnInit, OnDestroy{
-
-	TypeDepreciation = TypeDepreciation;
-
-	initialValueAsset = signal<number>( 3000 );
-	depreciationRate  = signal<number>( 20 );
-	year_month        = signal<string>( "2024-10" );
-	typeDepreciation  = signal< TypeDepreciation>( TypeDepreciation.linear );
-	factorValue       = signal<number>( 2 );
-
-	life 			  : AssetLifeChange[] =[] ;
-	lifeFormArray     = new FormArray<FormGroup>([]);
 
 	amortizations     = new Positions();
+	TypeDepreciation = TypeDepreciation;
 
+	lifeFormArray     = new FormArray<FormGroup>([]);
 
 	assetsDepreciationFormGroup = new FormGroup(	{    
-		initialValueAsset : new FormControl( this.initialValueAsset(), [ Validators.required, this.currencyValidator ]),    
+		initialValueAsset : new FormControl( 3000, [ Validators.required, this.currencyValidator ]),    
-		depreciationRate  : new FormControl( this.depreciationRate() ) ,
+		depreciationRate  : new FormControl( 20 ) ,
-		year_month        : new FormControl(  ),
+		year_month        : new FormControl( "2024-10" ),
-		typeDepreciation  : new FormControl( this.typeDepreciation ),
+		typeDepreciation  : new FormControl( TypeDepreciation.linear ),
-		factorValue       : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] ),
+		factorValue       : new FormControl( 2, [Validators.required,Validators.max(2)] ),
 
 	} );
 
@@ -45,34 +44,61 @@ export class AssetCalculatorComponent implements OnInit{
     }
 
 	ngOnInit(): void{
-		this.lifeFormArray.valueChanges.subscribe((value) => {
+		
-			this.calculate();
+		// const savedAsset = sessionStorage.getItem('assetForCalculator');
-		})
+		// if( savedAsset ) {
+		//   const asset = JSON.parse( savedAsset ) ;
+		//   this.controlsFromAsset( asset );
+		// }
+
+		this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() );
+		this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() );
 	}
 
-	calculate(){
+	ngOnDestroy(): void {
-		const when  = new YearMonth( this.year_month() )
+		// Zapisywanie danych przed zniszczeniem komponentu
-		const asset =  new Asset( this.depreciationRate(),	when, this.typeDepreciation(), this.factorValue() )
+		// const asset = this.controlsToAsset();
-		const creationlifeChange = new AssetLifeChange( when, this.initialValueAsset(), 0, 0 );
+		// sessionStorage.setItem('assetForCalculator', JSON.stringify(asset));
+	}
+
+	private controlsFromAsset( asset : Asset )  {
+		if( asset.life.length > 0){
+			this.assetsDepreciationFormGroup.patchValue({
+				initialValueAsset: asset.life[0].initial
+			  })
+		}
+	}
+
+	private controlsToAsset() : Asset {
+		const formValues = this.assetsDepreciationFormGroup.value as FormValues;
+		const when = new YearMonth( formValues.year_month );
+		const asset = new Asset( formValues.depreciationRate, when, formValues.typeDepreciation, formValues.factorValue );
+		const creationlifeChange = new AssetLifeChange(when, formValues.initialValueAsset , 0, 0);
 		asset.addChange(creationlifeChange);
 		for (let changeControlGroup of this.lifeFormArray.controls) {
 			const initialValueAsset = changeControlGroup.get('initialValueAsset')?.value;
 			const year_month = changeControlGroup.get('year_month')?.value;
 			asset.addChange(new AssetLifeChange(new YearMonth(year_month), initialValueAsset, 0, 0));
 		}
+		return asset;
+	}
+
+	calculate(){
+		const asset = this.controlsToAsset();
 		this.calculateForAsset( asset );
 	}
 
 	calculateForAsset( asset : Asset ) { 
 		this.assetService.calculate( asset ).subscribe( 
-			positions => { this.amortizations=positions; this.calculateToValues() });
+			positions => { this.calculateToValues(positions), this.amortizations = positions });
 
     }
 
-    calculateToValues() {
+    calculateToValues( positions:Positions )  {
 		let sum :number = 0;
 		let sumThisYear: number = 0;
-		for(let position of this.amortizations.positions ){
+		for(let position of positions.positions ){
+
 			position.calculatedDepreciation = position.calculatedDepreciation *0.01;
 
 			sum += position.calculatedDepreciation;
@@ -99,21 +125,13 @@ export class AssetCalculatorComponent implements OnInit{
 		return regex.test(value) ? null : { invalidCurrency: true };
 	}
 
-	//  lifeSignal        = signal<FormArray>(this.lifeFormArray);
-
-
-	// changeValuCount = computed(() => this.lifeSignal().length);
-
-
 	addChangeValue() {
+		const formValues = this.assetsDepreciationFormGroup.value as FormValues;
 
-		const change = new AssetLifeChange(new YearMonth( this.year_month() ), 1000, 0, 0 );
+		const change = new AssetLifeChange(new YearMonth( formValues.year_month ), 1000, 0, 0 );
 	
-		const newFormGroup = new FormGroup( 	{
+		const newFormGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
-				initialValueAsset: new FormControl( change.initial ),
+											  year_month	   : new FormControl( formValues.year_month )})
-				year_month	     : new FormControl( this.year_month() )
-			}
-		)
 
 		this.lifeFormArray.push(newFormGroup);
 

src/app/fixed-asset/fixed-asset.component.ts

@@ -56,6 +56,7 @@ import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormControl, F
 })
 export class FixedAssetComponent {
 
+  
   static indexNr = 1;
 
   TypeDepreciation = TypeDepreciation;