Update not reflected in parent form when using ValueChanges in Angular's ControlValueAccessor

Question

Update not reflected in parent form when using ValueChanges in Angular's ControlValueAccessor

Here is the code snippet I am currently working with:

https://stackblitz.com/edit/angular-control-value-accessor-form-submitted-val-egkreh?file=src/app/app.component.html

I have set default values for the form fields, but when clicking the button, the parent form does not reflect them.

private createFormInstance() {
  this.form = this.fb.group({
    username: ['test', [Validators.required]],
    password: ['test', [Validators.required]],
  });
}

When submitting without changing any input fields, I expect to see the default values displayed, but instead, I get null. Data only shows up if I make changes to the input fields. However, there are cases where I need to submit the form with default values without making any modifications.

https://i.sstatic.net/R7TWR.png

angular typescript angular-reactive-forms angular-forms controlvalueaccessor

Answer 1

Answer №1

Imagine a situation where your scenario closely resembles the question discussed in this post: Angular Custom Form Control - Get default value.

In your specific case, once the custom form is rendered, utilize the AfterViewInit lifecycle hook to initiate

this.form.updateValueAndValidity();

By doing so, the nested form will be updated and its default value will be transmitted to the parent form.

import { AfterViewInit } from '@angular/core';

export class LoginFormComponent
  implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {

  ...

  ngAfterViewInit() {
    setTimeout(() => {
      this.form.updateValueAndValidity();
    })
  }
}

Check out the Demo on StackBlitz

Answer 2

Imagine a situation where your scenario closely resembles the question discussed in this post: Angular Custom Form Control - Get default value.

In your specific case, once the custom form is rendered, utilize the AfterViewInit lifecycle hook to initiate

this.form.updateValueAndValidity();

By doing so, the nested form will be updated and its default value will be transmitted to the parent form.

import { AfterViewInit } from '@angular/core';

export class LoginFormComponent
  implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {

  ...

  ngAfterViewInit() {
    setTimeout(() => {
      this.form.updateValueAndValidity();
    })
  }
}

Check out the Demo on StackBlitz

Update not reflected in parent form when using ValueChanges in Angular's ControlValueAccessor

Answer №1

Similar questions

How to incorporate a custom JavaScript file into an Angular 7 application

Tips for dynamically updating localeData and LOCALE_ID for i18n websites during the build process in Angular 9

What is the best way to incorporate master/detail components without relying on hierarchical routes?

The identity of the property cannot be located within undefined

Removing buttons from a table row dynamically

Using Typescript to create an interface that extends another interface and includes nested properties

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

Tips for avoiding parent div click interference in Angular

What could be the reason for TypeScript throwing an error that 'product' does not exist in type '{...}' even though 'product' is present?

Accessing a JSON value in SCSS for localization

Angular version 5 and above introduces a new feature called "openFromComponent" within the Snackbar component, facilitating seamless communication

Angular does not display results when using InnerHtml

An error has occurred in Angular2 and Ionic 2, where there is a TypeError preventing the reading of the property 'addEventListener' in the InAppBrowser

Enhancing Visuals with src="imageUrl within Html"

What exactly does "blocking and tackling" refer to in the Angular2 documentation?

Mixing TypeScript generic types loosely

Which specific version of @angular/material should I be using?

Enhancing the appearance of the Mui v5 AppBar with personalized styles

Is it possible to exclude a certain prop from a styled component that has emotions?

Error encountered when trying to access children components in Typescript, even though React.FC is being