How to mark nested angular form as touched implementing ControlValueAccessor?

user_190646 0
Viewed 739

There is an example form Angular University how to use nested forms with ControlValueAccessor.

They create a separate form component and use it as a sub-form:

<div [formGroup]="form">
  ... other form controls
  <address-form formControlName="address" legend="Address"></address-form>
</div>

I want to have all the fields of the nested form marked as touched if I call the markAllAsTouched method on the parent form.

<form [formGroup]="form">
  <app-address-form formControlName="address"></app-address-form>      
</form>
<button (click)="markAsTouched()">Mark as touched</button>

export class AppComponent {
  public form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = fb.group({ address: fb.control({ city: '' }) });
  }

  public markAsTouched() {
    this.form.markAllAsTouched();
  }
}

Is it possible using this approach?

I have built a simplified version on StackBlitz.

What actually happens when you click the button is marking the app-address-form as touched:

<app-address-form formcontrolname="address" class="ng-pristine ng-valid ng-touched">
...
</app-address-form>

But I want to propogate it to the child form and its fields.

angular-reactive-forms angular
3 Answers

Really the mannage of nested form groups that explain the link is a bit confused because you really not have nested form groups. You has a FormGroup with one control (the value of the control is an object but you only has one control)

See that in your example you write:

 this.form = fb.group({ address: fb.control({ city: '' }) });

A nested formGroup should be like:

 this.form = fb.group({ address: fb.group({ city: '' }) });

But this formGroup can not be mannage in the way Angular University say. The way is simply use a component and pass the formGroup as Input(*)

It's the reason because only is touched the "control"

SOLUTION:You can use a template reference variable and pass to your function

<form [formGroup]="form">
  <app-address-form #address formControlName="address"></app-address-form>      
</form>
<button (click)="markAsTouched(address)">Mark as touched</button>

  public markAsTouched(address:any) {
    this.form.markAllAsTouched();
    //see that you can access to the form of the "adress" simply
    //using adress.form
    address.form.markAllAsTouched()
  }

(*) the component (that not implements from ControlValueAccesor) is simply

@Component({
  selector: 'app-address-form',
  template: `
    <div [formGroup]="form">
      <label>City</label>
      <input formControlName="city" (blur)="onTouched()">
    </div>
  `
})
export class AddressFormComponent {
    form:FormGroup
    @Input('form') set _(value){
      this.form=value as FormGroup
    }
}

And you use as

<app-address-form [form]=form.get('address')><app-address-form>
user_85581860

Probably there is a better way but, you could achieve this by using an Input

Parent component ts

export class AppComponent {
  public form: FormGroup;
  setAsTouched: boolean = false;

  constructor(private fb: FormBuilder) {
    this.form = fb.group({ address: fb.control({ city: '' }) });
  }

  public markAsTouched() {
    this.setAsTouched = true;
  }
}

Parent template component

<h1>Form</h1>
<form [formGroup]="form">
  <app-address-form
    formControlName="address"
    [mark]="setAsTouched"
  ></app-address-form>
</form>
<button (click)="markAsTouched()">Mark as touched</button>

Child component ts

...
...
export class AddressFormComponent implements ControlValueAccessor, Validator {
  @Input() set mark(isTouched: boolean) {
    if (isTouched) {
      this.form.markAllAsTouched();
    }
  }

  ...
  ...
  ...
}
user_28410910

I found the following solution for propagating markAsTouched to child controls.

The following recursive function helps:

const updateFormControlTree = (abstractControl: AbstractControl): void => {
  const forEachChildControl = (
    control: AbstractControl,
    callbackFunction: (abstractControl: AbstractControl) => void): void => {
      const childControls = (control as AbstractControl & { controls?: [] }).controls;

      if (!childControls) {
        return;
      }

      if (typeof childControls === 'object') {
        const extractedChildControls: AbstractControl[] =
          Object.values(childControls);

        extractedChildControls.forEach((childControl) => {
          callbackFunction(childControl);
        });
      }
    };

  forEachChildControl(abstractControl, (control: AbstractControl) =>
    updateFormControlTree(control)
  );
  abstractControl.markAsTouched();
};

I have to override markAsTouched of my control with the function above. For this, I need FormControl instead of the formControlName attribute:

<app-address-form [formControl]="addressControl"></app-address-form>

And this is how I can override the function:

export class AddressFormComponent implements ControlValueAccessor, Validator, OnInit
{
  @Input() formControl!: FormControl;

  public ngOnInit(): void {
    this.formControl.markAsTouched = () => updateFormControlTree(this.form);
  }
  ...
}

The last thing to do is to mark my control as touched from the parent form:

export class AppComponent  {
  public addressControl = new FormControl();
  public form: FormGroup = this.fb.group({
    address: this.addressControl,
  });

  constructor(private fb: FormBuilder) {    
  }

  markAsTouched() {
    this.addressControl.markAsTouched();
  }
}

I have built a working example on StackBlitz.

P.S. The solution above was inspired by the method for updating values and validity found in the source code of Angular Framework. This method is private. Would be nice to have it public though.

user_1906460
Related