FormControl отображает ", required (control)" в качестве значения - PullRequest
Новая
       9

FormControl отображает ", required (control)" в качестве значения

0 голосов
/ 16 февраля 2020

Когда моя форма загружает значения по умолчанию в моих входах

, требуется (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 определены на этом уровне функции, поэтому я не думаю, что необходимо совместно использовать все другие функции и интерфейсы используемый. Так вот, как форма создается перед передачей в мой компонент, где я пытаюсь подключиться к ним в шаблоне. Кто-нибудь знает, почему я получаю этот результат и что мне нужно сделать по-другому, чтобы удовлетворить мой вариант использования?

1 Ответ

1 голос
/ 16 февраля 2020

Проблема здесь в формировании FormControls, попробуйте это -

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

...