docs: updated dynamic forms example (#31510)

Fixes #31446

PR Close #31510
This commit is contained in:
Santosh Yadav 2019-11-14 13:14:37 +05:30 committed by Alex Rickabaugh
parent 53fc2ed8bf
commit 6fadb7a3a4
7 changed files with 18 additions and 12 deletions

View File

@ -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();
}
}

View File

@ -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>

View File

@ -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; }
}

View File

@ -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());
}
}

View File

@ -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 || '';
}
}

View File

@ -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 => {

View File

@ -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));
}
}