代码之家  ›  专栏  ›  技术社区  ›  afeef

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

  •  2
  • afeef  · 技术社区  · 6 年前

    错误

    未捕获错误:模板分析错误: 无法绑定到“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

    • 任何解决方案都是最受欢迎的
    0 回复  |  直到 6 年前