angular form value {} is null in ts file but works in html

Question

All I want is for the value to show up in ts file. I have a parent component called 'listform' -> childComp 'singlecontrol'. all the values in 'singlecontrol' tsfile works except when my image value goes in it returns null. I've been very confused for weeks on this problem.

singlecontrol ts

import { Component, OnInit, Input, HostListener, AfterViewChecked,ViewChild, AfterViewInit ,ElementRef, Renderer2, OnChanges, Output, EventEmitter ,ChangeDetectionStrategy} from '@angular/core';
import { FormControl, FormArray, FormBuilder, FormGroup, ReactiveFormsModule, ValidationErrors, ValidatorFn, FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, AbstractControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { BehaviorSubject, Subscription } from 'rxjs';
import { customValidators } from '../../formfieldbuilder/customvalidators';


@Component({
  selector: 'app-singlecontrol',
  templateUrl: './singlecontrol.component.html',
  styleUrls: ['./singlecontrol.component.scss']
})
export class SinglecontrolComponent implements OnInit {
  @Input() data: any;
  @Input() control: FormGroup;
  public controlEnd:any;
  @Input() errorsfile: any;
  @Input() auth: any;
  public image="null"
  public status:any;
  constructor( ) {

// this.control.statusChanges.subscribe((info) => {
//   console.log(info)
//   this.status = info;
//   console.log(status)
// })
   }




  ngOnInit() {
//console.log(errors)
 this.status =this.control.get(this.data.name).status
 this.controlEnd =  this.control.get(this.data.name)

 console.log(this.controlEnd)
 console.log(this.controlEnd.value)
 console.log(this.controlEnd.value)
}






  onImagePicksinglecontrol(e, cardname, controlpick) {

    const file = (e.target).files[0]
    console.log(e.target)
console.log("file")
console.log(file)
    const reader = new FileReader();
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      var img:any = new Image;
      var url = e.target.result;
       img.src = e.target.result;
       console.log(reader.result)
       this.image =reader.result
       console.log("image")
       console.log(this.image)
       var keyexist = false
        img.onload = function() {
          console.log(img.width)
          console.log(img.width)
          console.log(img.width)
          console.log(img.width)
          console.log(file.name)
          console.log(file.size)
          console.log(file.type)
            var ob = {"64bit":reader.result,"image_structure":{"width":img.width,"height":img.height,"filename":file.name,"filesize":file.size,"filetype":file.type}}
          //set value to this ob
                  controlpick.parent.patchValue({ [cardname]: ob })
                  console.log("CONTROLPICK")
                  console.log(controlpick)

                  controlpick.parent.updateValueAndValidity();
    }


    }

    // this.control.get(this.data.name).patchValue()

    // controlpick.parent.patchValue({ [cardname]: file })
    // controlpick.parent.updateValueAndValidity();
    console.log(this.control)
console.log(this.image)

  }

}

this.controlEnd value for my image object = null should be {}, the rest of controlEnd controls are not null logging the correct value

Answer 1

Apparently it didnt load the value in ts file when moving data in the input(). in the onInit() I subscribed to the values to get the component to update with most recent values and status.

   arrayitem[field].statusChanges.subscribe(s=>{
     console.log(s)
     this.status = i[this.data.name].status
     try{
       this.status = s}catch{
       console.log("NO IMAGE");
     }
 
   })
   cont.valueChanges.subscribe(i=>{
   console.log(i)
   console.log(i[this.data.name])
     this.status = i[this.data.name].status
    try{this.images.push( i[this.data.name].path)}catch{console.log("NO IMAGE")}
    console.log(this.images)
 
  })