use control value accessor for nested form

107 Views Asked by At

I followed this blog post.

Everything works, but I have a few questions regarding control value accessor if we implement a nested reusable form with it.

First, in the example the blog writer uses in the registerOnChange event an array for storing the subscriptions:

const sub = this.form.valueChanges.subscribe(onChange);
this.onChangeSubs.push(sub);
  1. Why does he use an array? If I use just a simple variable for storing the subscription, it also works. The question is not about storing and destroying the subscription.

  2. Second question is, that in every example emitEvent is set to false in the writeValue method:

this.form.setValue(value, { emitEvent: false });

Why is that? We want, that statusChanges and valueChanges triggers.

  1. Although we define our sub form and the controls like a regular form:

    form: FormGroup = this.fb.group({ addressLine1: [null, [Validators.required]], addressLine2: [null, [Validators.required]], zipCode: [null, [Validators.required]], city: [null, [Validators.required]], });

But if I console log the main form:

mainForm = this.fb.group({
    userName: [''],
    address: [],
  });

I see, that the form controls in the address formgroup aren't really controls (the address form group has no controls property). They are just object entries with a value. Which means, that yes, we did a nested form group, but this is threated as a custom form control in a whole. So, basically with control value accessor we can implement reusable nested forms, but in fact, the inputs aren't really form controls. Am I right?

0

There are 0 best solutions below