Upon loading my form, the default values in the input fields are set to:
,required(control) { return isEmptyInputValue(control.value) ? { 'required': true } : null; }
The template structure of my form is as follows:
<form [formGroup]="SvgFormData" (ngSubmit)="onSubmit()">
<section class="text-control-section">
<label class="control-label">
<p class="articleText">title:</p>
<input class="text-control" type="text" formControlName="title" />
</label>
<label class="control-label">
<p class="articleText">graphic id:</p>
<input class="text-control" type="text" formControlName="graphicId" />
</label>
</section>
</form>
This component receives the FormGroup data from its parent component through an @Input(). My goal is to create an app for parsing and saving SVG to a database in JSON format. The parser returns a data object that I pass into a custom function to generate the entire FormGroup while populating the values of the FormControls. Despite being completed technically, I turn it into a form to enable editing before saving it to the database. Here is the main function:
export function CreateGraphicObjectForm(data?: OvaadSvgDataObject): FormGroup{
let graphicObjectForm: FormGroup = new FormGroup({
title : new FormControl([(data ? data.title : ''), Validators.required]),
graphicId : new FormControl([(data ? data.graphicId : ''), Validators.required]),
viewBox : CreateViewBoxForm((data ? data.viewBox : undefined)),
coreAttributes : new FormArray([]),
coreStyles : new FormArray([]),
elements : new FormArray([])
});
if(data.coreAttributes.length > 0){
data.coreAttributes.forEach((a: OvaadGraphicAttribute)=>{
let coreAttrArray: FormArray = graphicObjectForm.get('coreAttributes') as FormArray;
coreAttrArray.push(CreateAttributeForm(a));
});
}
if(data.coreStyles.length > 0){
data.coreStyles.forEach((a: OvaadSvgStyleProperty)=>{
let coreStyleArray: FormArray = graphicObjectForm.get('coreStyles') as FormArray;
coreStyleArray.push(CreateStylePropertyForm(a));
});
}
if(data.elements.length > 0){
data.elements.forEach((a: OvaadGraphicObject)=>{
let elementArray: FormArray = graphicObjectForm.get('elements') as FormArray;
elementArray.push(CreateGraphicElementForm(a));
});
}
return graphicObjectForm as FormGroup;
}
The controls for title and graphicId are defined within this function level, omitting the need to share other functions and interfaces used. This is how the form is structured before passing it to my component, where I attempt to link them in the template. Any insights on why I'm encountering this issue and suggestions for improvement based on my use case?