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>

此组件通过 @Input() 从其父组件接收 FormGroup 数据。我最终制作了一个应用程序，用于解析 SVG 并将其以 JSON 格式保存到我的数据库中。解析器 returns 一个数据对象，我将其传递给自定义函数以生成整个 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]),

Answer 2

我的问题是我这样做了：

this.myReactiveForm.setValue({
  field: ['', Validators.required]
})

而不是这个：

this.myReactiveForm.setValue({
  field: ''
})

FormControl 显示“,required(control)”作为它的值

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

angular

typescript

angular-forms