错误
未捕获错误:模板分析错误:
无法绑定到“question”,因为它不是“app question”的已知属性。
-
如果“app question”是一个角度分量,并且它有“question”输入,那么验证它是否是该模块的一部分。
-
如果“app question”是一个Web组件,则将“CUSTOM\u ELEMENTS\u SCHEMA”添加到@NgModule.schemas'来抑制此消息。
-
若要允许任何属性,请向@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