docs: updated dynamic forms example (#31510)

Fixes #31446

PR Close #31510

aio/content/examples/dynamic-form/src/app/app.component.ts

@@ -2,21 +2,23 @@
 import { Component }       from '@angular/core';
 
 import { QuestionService } from './question.service';
+import { QuestionBase }    from './question-base';
+import { Observable }      from 'rxjs';
 
 @Component({
   selector: 'app-root',
   template: `
     <div>
       <h2>Job Application for Heroes</h2>
-      <app-dynamic-form [questions]="questions"></app-dynamic-form>
+      <app-dynamic-form [questions]="questions$ | async"></app-dynamic-form>
     </div>
   `,
   providers:  [QuestionService]
 })
 export class AppComponent {
-  questions: any[];
+  questions$: Observable<QuestionBase<any>[]>;
 
   constructor(service: QuestionService) {
-    this.questions = service.getQuestions();
+    this.questions$ = service.getQuestions();
   }
 }

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html

@@ -11,7 +11,7 @@
       <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
     </select>
 
-  </div> 
+  </div>
 
   <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
 </div>

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts

@@ -9,7 +9,7 @@ import { QuestionBase }     from './question-base';
   templateUrl: './dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
-  @Input() question: QuestionBase<any>;
+  @Input() question: QuestionBase<string>;
   @Input() form: FormGroup;
   get isValid() { return this.form.controls[this.question.key].valid; }
 }

aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts

@@ -12,7 +12,7 @@ import { QuestionControlService }    from './question-control.service';
 })
 export class DynamicFormComponent implements OnInit {
 
-  @Input() questions: QuestionBase<any>[] = [];
+  @Input() questions: QuestionBase<string>[] = [];
   form: FormGroup;
   payLoad = '';
 
@@ -23,6 +23,6 @@ export class DynamicFormComponent implements OnInit {
   }
 
   onSubmit() {
-    this.payLoad = JSON.stringify(this.form.value);
+    this.payLoad = JSON.stringify(this.form.getRawValue());
   }
 }

aio/content/examples/dynamic-form/src/app/question-base.ts

@@ -6,6 +6,8 @@ export class QuestionBase<T> {
   required: boolean;
   order: number;
   controlType: string;
+  type: string;
+  options: {key: string, value: string}[];
 
   constructor(options: {
       value?: T,
@@ -13,7 +15,8 @@ export class QuestionBase<T> {
       label?: string,
       required?: boolean,
       order?: number,
-      controlType?: string
+      controlType?: string,
+      type?: string
     } = {}) {
     this.value = options.value;
     this.key = options.key || '';
@@ -21,5 +24,6 @@ export class QuestionBase<T> {
     this.required = !!options.required;
     this.order = options.order === undefined ? 1 : options.order;
     this.controlType = options.controlType || '';
+    this.type = options.type || '';
   }
 }

aio/content/examples/dynamic-form/src/app/question-control.service.ts

@@ -8,7 +8,7 @@ import { QuestionBase } from './question-base';
 export class QuestionControlService {
   constructor() { }
 
-  toFormGroup(questions: QuestionBase<any>[] ) {
+  toFormGroup(questions: QuestionBase<string>[] ) {
     let group: any = {};
 
     questions.forEach(question => {

aio/content/examples/dynamic-form/src/app/question.service.ts

@@ -4,15 +4,15 @@ import { Injectable }       from '@angular/core';
 import { DropdownQuestion } from './question-dropdown';
 import { QuestionBase }     from './question-base';
 import { TextboxQuestion }  from './question-textbox';
+import { of } from 'rxjs';
 
 @Injectable()
 export class QuestionService {
 
   // TODO: get from a remote source of question metadata
-  // TODO: make asynchronous
   getQuestions() {
 
-    let questions: QuestionBase<any>[] = [
+    let questions: QuestionBase<string>[] = [
 
       new DropdownQuestion({
         key: 'brave',
@@ -42,6 +42,6 @@ export class QuestionService {
       })
     ];
 
-    return questions.sort((a, b) => a.order - b.order);
+    return of(questions.sort((a, b) => a.order - b.order));
   }
 }