Ionic v4+ Angular-Dynamic forms

Hi, I am new to Ionic 4 and tried to learn dynamic form. I create a blank project: ionic start myApp blank, then followed the steps
of https://angular.io/guide/dynamic-form to modify/create components and service, got the project built, but only get a blank page. Wonder what I need
to do to get dynamic forms to show?

Thanks!
Liz

You should open inspect in browser you are using, there should be some error messages showing

I use ionic cordova run android command to run the project in real
device, there is no error message in the command prompt, I will run it in browser to see if there are error message there. Thanks!

I got error message:

Uncaught Error: Template parse errors:
Can’t bind to ‘question’ since it isn’t a known property of ‘app-question’.

  1. If ‘app-question’ is an Angular component and it has ‘question’ input, then verify that it is part of this module.

  2. If ‘app-question’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

  3. 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.

Your selector in dynamic-form-question.components.ts does not match the app-question you are using in dynamic-form.component.html

Yes, you caught the problem, thanks a lot!