I'm creating a form with custom inputs using ControlValueAccessor
which can be viewed here on stackblitz and it seems like whenever FormArray
enters the equation things get out of control. I also noticed that I need to use FormControlName
on FormGroup
s in order for the changes to be updated in the parent form.
My overall form looks like this
export class SvgParserComponent implements OnInit{
SvgForm : FormGroup<SvgForm> = new FormGroup<SvgForm>({
title: new FormControl<string>(''),
graphicId: new FormControl<string>(''),
svgInput: new FormControl<string>(''),
viewBox: new FormGroup<ViewBoxParams>({
x: new FormControl<string>(''),
y: new FormControl<string>(''),
width: new FormControl<string>(''),
height: new FormControl<string>('')
}),
styling: new FormGroup<StylingParams>({
globalStyles: new FormControl<string>(''),
mediaQueries: new FormArray<FormGroup<MediaQueryParams>>([])
})
});
//other code
}
The template for this level of the form looks like this
<form class="mainGrid" [formGroup]="SvgForm" (ngSubmit)="submitForm()">
<p>svg parser</p>
<code-input formControlName="svgInput"></code-input>
<text-input formControlName="title" [label]="'title'"></text-input>
<text-input formControlName="graphicId" [label]="'graphic id'"></text-input>
<viewbox-input formControlName="viewBox"></viewbox-input>
<styling-input formGroupName="styling"></styling-input>
<button type="submit">submit</button>
</form>
If you take a look at the viewbox-input
you'll see that I have that set with formControlName
rather than formGroupName
because the values entered won't update in the parent component otherwise. However the styling-input
creates problems if I set it to formControlName
so I just left it as formGroupName
.
Inside of the styling-input
there's a FormArray
which iterates a FormGroup
which has FormsGroups and FormArrays within it. I have the styling-input
set up like this.
@Component({
selector: 'styling-input',
templateUrl: './styling-input.component.html',
styleUrls: ['./styling-input.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: StylingInputComponent,
multi: true
}
]
})
export class StylingInputComponent implements ControlValueAccessor{
StylingForm: FormGroup<StylingParams> = new FormGroup<StylingParams>({
globalStyles: new FormControl<string>(''),
mediaQueries: new FormArray<FormGroup<MediaQueryParams>>([])
});
get MediaQueryList() {
return this.StylingForm.get('mediaQueries') as FormArray<FormGroup<MediaQueryParams>>;
}
writeValue(value: any){ if(value){ this.StylingForm.setValue(value); } }
registerOnChange(fn: any){ this.StylingForm.valueChanges.subscribe(fn); }
registerOnTouched(onTouched: Function){}
private createMediaQueryGroup(): FormGroup<MediaQueryParams> {
return new FormGroup<MediaQueryParams>({
selectorParams: new FormGroup<MediaSelectorParams>({
mediaType: new FormControl<MediaTypeParams>('all'),
expressions: new FormArray<FormGroup<MediaExpressionGroupParams>>([]),
}),
rules: new FormControl<string>('')
});
}
public addMediaQuery():void{
this.MediaQueryList.push(this.createMediaQueryGroup());
}
public removeMediaQuery(item: number): void{
this.MediaQueryList.removeAt(item);
}
}
and the template for this component looks like this
<article [formGroup]="StylingForm">
<p>Styles</p>
<code-input formControlName="globalStyles"></code-input>
<section>
<article formArrayName="MediaQueryList">
<media-query-input *ngFor="let a of MediaQueryList.controls; let i = index"
[formGroupName]="i"
[attr.GroupId]="i"
(RemoveGroup)="removeMediaQuery($any($event))"
></media-query-input>
</article>
<article>
<button type="button" (click)="addMediaQuery()">add media query</button>
</article>
</section>
</article>
So inside of this template I have a code-input
which is a FormControl
and the media-query-input
which is a FormGroup
that gets iterated from a FormArray
. As of right now I'm getting the following errors
control.registerOnChange is not a function
Cannot find control with name: 'MediaQueryList'
then when I click the add media query
button another media-query-input
component renders and this error pops up
Cannot find control with path: 'MediaQueryList -> 0'
Inside of the media-query-input
I have another FormControl
and FormArray
that renders weird showing something is clearly wrong which I'm guessing is just a recursion of the same issue I'm having in the styling-input
with properly iterating and rendering the media-query-input
.
I tried switching formGroupName
for formControlName
and even tried [attr.formControlName]
in some parts, I added forwardRef(()=> Component)
to the useExisting
property in my providers
which led to errors telling me controls and groups didn't exist yet. How am I supposed to structure this so everything works?
viewbox-input
for which you used a FormControl instead of a FormGroup because the parent component was not getting updated values, you could probably pass from the parent component the FormGroup in the SvgParserComponent component as an @Input property. This way, the parent and the child component are using the same FormGroup.