angular - FormControl 显示 ",required(control)"作为其值

Question

当我的表单加载我的输入中的默认值时

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

我设置模板的方式如下所示

<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>

该组件接收 FormGroup通过 @Input() 来自其父组件的数据.我最终制作了一个应用程序，用于解析 SVG 并将其以 JSON 格式保存到我的数据库中。解析器返回一个数据对象，我将其传递给自定义函数以生成整个 FormGroup在填写 FormControls 的值时.我希望能够在将这些数据保存到数据库之前对其进行编辑，这就是为什么即使它在技术上已经完成，我也要费心将其制成表格的原因。顶级功能看起来像这样。

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;
  }

title和 graphicId控件是在此功能级别定义的，因此我认为没有必要共享所有其他使用的功能和接口(interface)。所以这就是在传递到我的组件之前创建表单的方式，我尝试在模板中连接到它们。有谁知道我为什么会得到这个结果以及我需要做些什么来适应我的用例？

Answer 1

这里的问题是形成 FormControls，试试这个 -

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