Nesting of form using contolvalueaccessor

Question

I have a one container component and two child component : trip and component. To nest the child component in parent , i have implemented Controlvalueaccessor. I have created a abstractvalueaccessor class which implements Controlvalueaccessor and then other components(trip & contact) are extending it.

https://stackblitz.com/edit/angular-dfxwde

export class ContactComponent extends AbstractValueAccessor<ContactInfoModel>{

    contactInfo: FormGroup = new FormGroup({
        email: new FormControl("", [Validators.required]),
        phone: new FormControl("",[Validators.required])
    });

}

export class TripComponent extends AbstractValueAccessor<any>{

  tripInfo: FormGroup = new FormGroup({
      from: new FormControl("", [Validators.required]),
      to: new FormControl("",[Validators.required])
  });

  trip="";
}

I am able to achieve the nesting of form value when I am separately implementing CVA in each component because I'm able to play with formgroup value but not in this case.

Shifenis Shifenis · Accepted Answer · 2019-05-22T08:39:02

You are not implementing ControlValueAccessor, see this: How to implement custom FormControl

Nesting of form using contolvalueaccessor

1 Answers