typescript - Angular 8: PatchValue not working with ChangeDetector and UpdateValue

Question

I am trying to figure out why PatchValue does not work with FormBuilder. It shows data when retrieving the value, but does not set in the FormBuilder. Anyone know why? I am using UpdateValue and Changedetector. See Debugger picture below, Setting hard coded values does not work either

Update:

Found the answer, look at the Formbuilder, it has extra colon or space, guess the real question is, many have written 100 of components, how does one prevent this from happening again when there are slight character issues or spaces, etc?

Address Component:

this.editSharedForm = this.formBuilder.group({
  'phoneNumber': [null, [Validators.required, Validators.maxLength(50)]],
  'emailAddress': [null, [Validators.required, Validators.maxLength(50), Validators.email]],
  'effectiveStartDate': [null, [Validators.maxLength(200)]],
  'addressChangeReason': this.formBuilder.group({
    'addressChangeReasonId: : ': [null, [Validators.required]],
    'addressChangeReasonCode: : ': [null, [Validators.required, Validators.maxLength(50)]],
    'addressChangeReasonDescription: : ': [null, [Validators.required, Validators.maxLength(255)]]
  }),
  'addressPurpose': this.formBuilder.group({
    'lkPurposeofUseId: ': [null, [Validators.required]],
    'purposeofUseCode: ': [null, [Validators.required, Validators.maxLength(50)]],
    'purposeofUseDescription: ': [null, [Validators.required, Validators.maxLength(255)]]
  })

  addressPurposeChangeEvent(addressPurposeEvent) {
    this.cdr.detectChanges();
    this.editSharedForm.updateValueAndValidity();
    this.editSharedForm.patchValue({ addressPurpose : addressPurposeEvent });
    this.cdr.detectChanges();
    this.editSharedForm.updateValueAndValidity();
    this.cdr.detectChanges();
  }

Debugger Picture

Note: It receives addressPurposeEvent from an @Output, its a dropdown menu with values, and its send to the Parent ,

<app-address-purposeofuse-dropdown (addressPurposeChange)="addressPurposeChangeEvent($event)"></app-address-purposeofuse-dropdown>

Update: Setting hard values does not work either

this.editSharedForm.patchValue({ addressPurpose : { purposeofUseCode: 'test'}});

Answer 1

You should try to update like this

this.editSharedForm.get('addressPurpose').patchValue(addressPurposeEvent);

this will get you the control for the group and you can use its patchValue, with your way i dont think angular gets what to update. Hope it helps!