Расширение примера динамических форм Angular6 с использованием массива частей формы - PullRequest
0 голосов
/ 24 мая 2018

Я попытался расширить угловой пример динамических форм, используя массив с {names и QuestionBase []} - объектами. У меня 0 проблем со стандартной реализацией, только с моими собственными правками. Думаю, у меня не проблемы при получении новых данных макета, а при создании FormGroup, особенно в отношении свойства:действительный из этого.Надеюсь, вы мне поможете.
Я получаю следующее сообщение об ошибке:

DynamicFormQuestionComponent.html: 13 ОШИБКА TypeError: Невозможно прочитать свойство 'valid' из undefined (…)

И контекст

DynamicFormQuestionComponent.html: 13 КОНТЕКСТ ОШИБКИ DebugContext_ {view: Object, nodeIndex: 11, nodeDef: Object, elDef: Object, elView: Object}

Вот что я добавил в question.service.ts:

getDummies() {
let questions: QuestionBase<any>[] = [

  new DropdownQuestion({
    key: 'brave2',
    label: 'Bravery Rating',
    options: [
      {key: 'solid',  value: 'Solid'},
      {key: 'great',  value: 'Great'},
      {key: 'good',   value: 'Good'},
      {key: 'unproven', value: 'Unproven'}
    ],
    order: 20
  })];
let questions2: QuestionBase<any>[] = [
  new TextboxQuestion( {
    key: 'BG',
    label: 'Begründung',
    value: '',
    required: true,
    order: 3
  })
];
let object = [{name: 'test',data: questions2},
  {name: 'test2', data: questions}];

return object;

В моем компоненте я изменил в шаблоне (который показан, поэтому app.component.html или form-page длямоя часть):

<app-dynamic-forms [questions]="questions" [dummies]="dummies"></app-dynamic-forms>

и в .ts:

 dummies: any ;

и особенно в конструкторе:

this.dummies = service.getDummies();

dynamic-forms.component.ts (да, я изменил имя всего компонента, добавив «s»):

 @Input() dummies: any[] = [];
form2: FormGroup;

ngOnInit:

for (let i = 0; i < this.dummies.length; i++){
  this.form2  = this.qcs.toFormGroup(this.dummies[i].data);

шаблон (добавил это в -tag):

<div *ngFor="let dummy of dummies, let i = index">
      <h3>{{dummy.name}}</h3>
      <p>{{dummy.data}}</p>
      <app-question [question]="dummy.data[i]" [form]="form2"> </app-question>
    </div>

Я добавил все соответствующие файлы к этому Plunker .

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...