I got error message:
Uncaught Error: Template parse errors:
Can’t bind to ‘question’ since it isn’t a known property of ‘app-question’.
-
If ‘app-question’ is an Angular component and it has ‘question’ input, then verify that it is part of this module.
-
If ‘app-question’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
-
To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
][question]="question" [form]="form">
"): ng:///AppModule/DynamicFormComponent.html@4:20
Can’t bind to ‘form’ since it isn’t a known property of ‘app-question’.
Refer to https://angular.io/guide/dynamic-form), I have the code below:
dynamic-form.component.ts:
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’,
styleUrls: [’./dynamic-form.component.scss’],
providers: [ QuestionControlService ]
})
export class DynamicFormComponent implements OnInit {
@Input() questions: QuestionBase = ;
form: FormGroup;
payLoad = ‘’;
constructor(private qcs: QuestionControlService) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
}
}
dynamic-form.component.html:
<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>
Saved the following values
{{payLoad}}
***************************
question-base.ts:
export class QuestionBase {
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;
constructor(options: {
value?: T,
key?: string,
label?: string,
required?: boolean,
order?: number,
controlType?: string
} = {}) {
this.value = options.value;
this.key = options.key || ‘’;
this.label = options.label || ‘’;
this.required = !!options.required;
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || ‘’;
}
}
dynamic-form-question.components.ts:
import { Component, Input } from ‘@angular/core’;
import { FormGroup } from ‘@angular/forms’;
import { QuestionBase } from ‘…/question-base’;
@Component({
selector: ‘app-dynamic-form-question’,
templateUrl: ‘./dynamic-form-question.component.html’,
styleUrls: [’./dynamic-form-question.component.scss’],
})
export class DynamicFormQuestionComponent {
@Input() question: QuestionBase;
@Input() form: FormGroup;
constructor() { }
get isValid() { return this.form.controls[this.question.key].valid; }
}
dynamic-form-question.components.html:
{{question.label}}
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type">
<select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
<option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
</select>
{{question.label}} is required
***********************************
Please advice what might be wrong, thanks in advance.