How to properly implement nested forms with Validator and Control Value Accessor?

Question

In my application, I have a need for a reusable nested form component, such as Address. I want my AddressComponent to deal with its own FormGroup, so that I don't need to pass it from the outside. At Angular conference (video, presentation) Kara Erikson, a member of Angular Core team recommended to implement ControlValueAccessor for the nested forms, making the nested form effectively just a FormControl.

I also figured out that I need to implement Validator, so that the validity of my nested form can be seen by the main form.

In the end, I created the SubForm class that the nested form needs to extend:

export abstract class SubForm implements ControlValueAccessor, Validator {

  form: FormGroup;

  public onTouched(): void {
  }

  public writeValue(value: any): void {
    if (value) {
      this.form.patchValue(value, {emitEvent: false});
      this.onTouched();
    }
  }

  public registerOnChange(fn: (x: any) => void): void {
    this.form.valueChanges.subscribe(fn);
  }

  public registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.form.disable()
      : this.form.enable();
  }

  validate(c: AbstractControl): ValidationErrors | null {
    return this.form.valid ? null : {subformerror: 'Problems in subform!'};
  }

  registerOnValidatorChange(fn: () => void): void {
    this.form.statusChanges.subscribe(fn);
  }
}

If you want your component to be used as a nested form, you need to do the following:

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    }
  ],
})

export class AddressComponent extends SubForm {

  constructor(private fb: FormBuilder) {
    super();
    this.form = this.fb.group({
      street: this.fb.control('', Validators.required),
      city: this.fb.control('', Validators.required)
    });
  }

}

Everything works well unless I check the validity status of my subform from the template of my main form. In this case ExpressionChangedAfterItHasBeenCheckedError is produced, see ngIf statement (stackblitz code) :

<form action=""
      [formGroup]="form"
      class="main-form">
  <h4>Upper form</h4>
  <label>First name</label>
  <input type="text"
         formControlName="firstName">
         <div *ngIf="form.controls['address'].valid">Hi</div> 
  <app-address formControlName="address"></app-address>
  <p>Form:</p>
  <pre>{{form.value|json}}</pre>
  <p>Validity</p>
  <pre>{{form.valid|json}}</pre>


</form>

Chellappan வ · Accepted Answer · 2018-08-26 14:38:57Z

5

+50

Use ChangeDetectorRef

Checks this view and its children. Use in combination with detach to implement local change detection checks.

This is a cautionary mechanism put in place to prevent inconsistencies between model data and UI so that erroneous or old data are not shown to a user on the page

Ref:https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Ref:https://angular.io/api/core/ChangeDetectorRef

import { Component, OnInit,ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-upper',
  templateUrl: './upper.component.html',
  styleUrls: ['./upper.component.css']
})
export class UpperComponent implements OnInit {

  form: FormGroup;

  constructor(private fb: FormBuilder,private cdr:ChangeDetectorRef) {
    this.form = this.fb.group({
      firstName: this.fb.control('', Validators.required),
      address: this.fb.control('')
    });
  }

  ngOnInit() {
    this.cdr.detectChanges();
  }


}

Your Forked Example:https://stackblitz.com/edit/github-3q4znr

edited Aug 26, 2018 at 14:38

answered Aug 23, 2018 at 19:00

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

ganqqwerty Over a year ago

thanks! Does it mean that officially recommended way of composing the forms doesn't work and since it relies on a manual change detection call?

Chellappan வ Over a year ago

it will work.In your example some how change detection is being triggered after the change detection cycle that is why angular throwing error

ganqqwerty Over a year ago

I see that it works, my question is whether or not it's a bug in angular or not?

ganqqwerty Over a year ago

Yes, I know this kind of error and how to deal with it. It just surprises me that we need to manually trigger change detection or artificially make the validator asynchronous for such a fundamental operation as decomposition of forms.

Chellappan வ Over a year ago

Many developers even view it as a bug. But it’s certainly not. This is a cautionary mechanism put in place to prevent inconsistencies between model data and UI so that erroneous or old data are not shown to a user on the page. Check this also blog.angularindepth.com/…

|

Andreq Frenkel · Accepted Answer · 2018-08-31 14:21:29Z

2

WriteValue will be triggered in the same digest cycle with the normal change detection lyfe cycle hook.

To fix that without using changeDetectionRef you can define your validity status field and change it reactively.

public firstNameValid = false;

   this.form.controls.firstName.statusChanges.subscribe(
      status => this.firstNameValid = status === 'VALID'
    );

<div *ngIf="firstNameValid">Hi</div>

answered Aug 31, 2018 at 14:21

Andreq Frenkel

1,20810 silver badges14 bronze badges

Comments

Mahendra Hirapra · Accepted Answer · 2018-08-30 04:49:09Z

-2

Try to use [hidden] in stand of *ngIf, it will work without ChangeDetectorRef.

Update URL : https://stackblitz.com/edit/github-3q4znr-ivtrmz?file=src/app/upper/upper.component.html

<div [hidden]="!form.controls['address'].valid">Hi</div>

answered Aug 30, 2018 at 4:49

Mahendra Hirapra

3794 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to properly implement nested forms with Validator and Control Value Accessor?

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related