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

Question

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

,required(control) { return isEmptyInputValue(control.value) ? {'必需'：真}：空；}

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

<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控制是在这个级别的功能的定义，所以我不认为这是必要的所有共享使用的其它功能和接口。所以这就是表单在传递到我的组件之前创建的方式，我尝试在模板中连接到它们。有谁知道为什么我会得到这个结果以及我需要做些什么来适应我的用例？

Answer 1

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

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