FormControl displaying ",required(control)" as its value

Question

When my form loads the default values in my inputs is

,required(control) { return isEmptyInputValue(control.value) ? { 'required': true } : null; }

The way I have my template set up looks like this

<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 recieves the FormGroup data from its' parent component through an @Input(). I'm ultimately making an app for parsing and saving SVG to my database in JSON format. The parser returns a data object which I pass into a custom function to generate the entire FormGroup while filling in the values of the FormControls. I want to be able to edit this data before saving it to the database which is why I'm bothering to make it into a form even though it's already technically completed. the Top level function looks like this.

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 title and graphicId controls are defined at this level of the function so I don't think it's necessary to share all the other functions and interfaces used. So this is how the form is created before being passed into my component where I try to connect to them in the template. Does anyone know why I'm getting this result and what I need to do differently to suit my use case?

Answer 1

The problem here is forming FormControls, try this -

title: new FormControl((data ? data.title : ''), [Validators.required]), graphicId: new FormControl((data ? data.graphicId : ''), [Validators.required]),