动态窗体在角度7下不工作[关闭]

错误

未捕获错误:模板分析错误: 无法绑定到“question”,因为它不是“app question”的已知属性。

1. 如果“app question”是一个角度分量,并且它有“question”输入,那么验证它是否是该模块的一部分。
2. 如果“app question”是一个Web组件,则将“CUSTOM\u ELEMENTS\u SCHEMA”添加到@NgModule.schemas'来抑制此消息。

3. 若要允许任何属性,请向@NgModule.schemas'的。

   ][question]=“问题”[form]=“表单”>

问题发生在for循环角度是说应用程序问题是组件。

            import { Component, Input, OnInit }  from '@angular/core';
            import { FormGroup }                 from '@angular/forms';

            import { QuestionBase }              from './question-base';
            import { QuestionControlService }    from './question-control.service';

            @Component({
              selector: 'app-dynamic-form',
              templateUrl: './dynamic-form.component.html',
              providers: [ QuestionControlService ]
            })
            export class DynamicFormComponent implements OnInit {

              @Input() questions: QuestionBase<any>[] = [];
              form: FormGroup;
              payLoad = '';

              constructor(private qcs: QuestionControlService) {  }

              ngOnInit() {
                this.form = this.qcs.toFormGroup(this.questions);
              }

              onSubmit() {
                this.payLoad = JSON.stringify(this.form.value);
              }
            }

动态形式组件.html

            <div>
              <form (ngSubmit)="onSubmit()" [formGroup]="form">

                <div *ngFor="let question of questions" class="form-row">
                  <app-question [question]="question" [form]="form"></app-question>
                </div>

                <div class="form-row">
                  <button type="submit" [disabled]="!form.valid">Save</button>
                </div>
              </form>

              <div *ngIf="payLoad" class="form-row">
                <strong>Saved the following values</strong><br>{{payLoad}}
              </div>
            </div>

错误代码

   <div *ngFor="let question of questions" class="form-row">
              <app-question [question]="question" [form]="form"></app-question>
            </div>

问题

没有组件 问题 在教程中,它们是作为组件访问的。

解决方案

它提供了一个问题列表,每个问题都绑定到一个组件元素。标记与DynamicFormQuestionComponent匹配,该组件负责根据数据绑定问题对象中的值呈现每个问题的详细信息。

 @Component({
   selector: 'app-question',
   templateUrl: './dynamic-form-question.component.html'
   })

网址

https://stackblitz.com/angular/jamlyparydld

https://angular.io/guide/dynamic-form

• 任何解决方案都是最受欢迎的