欧美午夜在线影院,日韩午夜无码A级毛片,免费a级毛片

許多表單（例如問(wèn)卷）可能在格式和意圖上都非常相似。為了更快更輕松地生成這種表單的不同版本，你可以根據(jù)描述業(yè)務(wù)對(duì)象模型的元數(shù)據(jù)來(lái)創(chuàng)建動(dòng)態(tài)表單模板。然后就可以根據(jù)數(shù)據(jù)模型中的變化，使用該模板自動(dòng)生成新的表單。

如果你有這樣一種表單，其內(nèi)容必須經(jīng)常更改以滿足快速變化的業(yè)務(wù)需求和監(jiān)管需求，該技術(shù)就特別有用。一個(gè)典型的例子就是問(wèn)卷。你可能需要在不同的上下文中獲取用戶的意見(jiàn)。用戶要看到的表單格式和樣式應(yīng)該保持不變，而你要提的實(shí)際問(wèn)題則會(huì)因上下文而異。

在本教程中，你將構(gòu)建一個(gè)渲染基本問(wèn)卷的動(dòng)態(tài)表單。你要為正在找工作的英雄們建立一個(gè)在線應(yīng)用。英雄管理局會(huì)不斷修補(bǔ)應(yīng)用流程，但是借助動(dòng)態(tài)表單，你可以動(dòng)態(tài)創(chuàng)建新的表單，而無(wú)需修改應(yīng)用代碼。

本教程將指導(dǎo)你完成以下步驟。

為項(xiàng)目啟用響應(yīng)式表單。

建立一個(gè)數(shù)據(jù)模型來(lái)表示表單控件。

使用示例數(shù)據(jù)填充模型。

開(kāi)發(fā)一個(gè)組件來(lái)動(dòng)態(tài)創(chuàng)建表單控件。

你創(chuàng)建的表單會(huì)使用輸入驗(yàn)證和樣式來(lái)改善用戶體驗(yàn)。它有一個(gè) Submit 按鈕，這個(gè)按鈕只會(huì)在所有的用戶輸入都有效時(shí)啟用，并用色彩和一些錯(cuò)誤信息來(lái)標(biāo)記出無(wú)效輸入。

這個(gè)基本版可以不斷演進(jìn)，以支持更多的問(wèn)題類型、更優(yōu)雅的渲染體驗(yàn)以及更高大上的用戶體驗(yàn)。

先決條件

在學(xué)習(xí)本節(jié)之前，你應(yīng)該對(duì)下列內(nèi)容有一個(gè)基本的了解。

TypeScript 和 HTML5 編程。

Angular 應(yīng)用設(shè)計(jì)的基本概念。

響應(yīng)式表單的基礎(chǔ)知識(shí)。

為項(xiàng)目啟用響應(yīng)式表單

動(dòng)態(tài)表單是基于響應(yīng)式表單的。為了讓應(yīng)用訪問(wèn)響應(yīng)式表達(dá)式指令，根模塊會(huì)從 @angular/forms 庫(kù)中導(dǎo)入 ReactiveFormsModule。

以下代碼展示了此范例在根模塊中所做的設(shè)置。

Path："src/app/app.module.ts" 。

    import { BrowserModule }                from '@angular/platform-browser';
    import { ReactiveFormsModule }          from '@angular/forms';
    import { NgModule }                     from '@angular/core';


    import { AppComponent }                 from './app.component';
    import { DynamicFormComponent }         from './dynamic-form.component';
    import { DynamicFormQuestionComponent } from './dynamic-form-question.component';


    @NgModule({
      imports: [ BrowserModule, ReactiveFormsModule ],
      declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule {
      constructor() {
      }
    }

Path："src/app/main.ts" 。

    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';


    if (environment.production) {
      enableProdMode();
    }


    platformBrowserDynamic().bootstrapModule(AppModule);

創(chuàng)建一個(gè)表單對(duì)象模型

動(dòng)態(tài)表單需要一個(gè)對(duì)象模型來(lái)描述此表單功能所需的全部場(chǎng)景。英雄應(yīng)用表單中的例子是一組問(wèn)題 - 也就是說(shuō)，表單中的每個(gè)控件都必須提問(wèn)并接受一個(gè)答案。

此類表單的數(shù)據(jù)模型必須能表示一個(gè)問(wèn)題。本例中包含 DynamicFormQuestionComponent，它定義了一個(gè)問(wèn)題作為模型中的基本對(duì)象。

這個(gè) QuestionBase 是一組控件的基類，可以在表單中表示問(wèn)題及其答案。

Path："src/app/question-base.ts" 。

export class QuestionBase<T> {
  value: T;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  type: string;
  options: {key: string, value: string}[];


  constructor(options: {
      value?: T,
      key?: string,
      label?: string,
      required?: boolean,
      order?: number,
      controlType?: string,
      type?: 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 || '';
    this.type = options.type || '';
  }
}

定義控件類

此范例從這個(gè)基類派生出兩個(gè)新類，TextboxQuestion 和 DropdownQuestion，分別代表不同的控件類型。當(dāng)你在下一步中創(chuàng)建表單模板時(shí)，你會(huì)實(shí)例化這些具體的問(wèn)題類，以便動(dòng)態(tài)渲染相應(yīng)的控件。

TextboxQuestion 控件類型表示一個(gè)普通問(wèn)題，并允許用戶輸入答案。

Path："src/app/question-textbox.ts" 。

    import { QuestionBase } from './question-base';


    export class TextboxQuestion extends QuestionBase<string> {
      controlType = 'textbox';
      type: string;


      constructor(options: {} = {}) {
        super(options);
        this.type = options['type'] || '';
      }
    }

TextboxQuestion 控件類型將使用 <input> 元素表示在表單模板中。該元素的 type 屬性將根據(jù) options 參數(shù)中指定的 type 字段定義（例如 text，email，url ）。

DropdownQuestion 控件表示在選擇框中的一個(gè)選項(xiàng)列表。

Path："src/app/question-dropdown.ts" 。

    import { QuestionBase } from './question-base';


    export class DropdownQuestion extends QuestionBase<string> {
      controlType = 'dropdown';
      options: {key: string, value: string}[] = [];


      constructor(options: {} = {}) {
        super(options);
        this.options = options['options'] || [];
      }
    }

編寫表單組

動(dòng)態(tài)表單會(huì)使用一個(gè)服務(wù)來(lái)根據(jù)表單模型創(chuàng)建輸入控件的分組集合。下面的 QuestionControlService 會(huì)收集一組 FormGroup 實(shí)例，這些實(shí)例會(huì)消費(fèi)問(wèn)題模型中的元數(shù)據(jù)。你可以指定一些默認(rèn)值和驗(yàn)證規(guī)則。

Path："src/app/question-control.service.ts" 。

import { Injectable }   from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';


import { QuestionBase } from './question-base';


@Injectable()
export class QuestionControlService {
  constructor() { }


  toFormGroup(questions: QuestionBase<string>[] ) {
    let group: any = {};


    questions.forEach(question => {
      group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
                                              : new FormControl(question.value || '');
    });
    return new FormGroup(group);
  }
}

編寫動(dòng)態(tài)表單內(nèi)容

動(dòng)態(tài)表單本身就是一個(gè)容器組件，稍后你會(huì)添加它。每個(gè)問(wèn)題都會(huì)在表單組件的模板中用一個(gè) <app-question> 標(biāo)簽表示，該標(biāo)簽會(huì)匹配 DynamicFormQuestionComponent 中的一個(gè)實(shí)例。

DynamicFormQuestionComponent 負(fù)責(zé)根據(jù)數(shù)據(jù)綁定的問(wèn)題對(duì)象中的各種值來(lái)渲染單個(gè)問(wèn)題的詳情。該表單依靠 [formGroup] 指令來(lái)將模板 HTML 和底層的控件對(duì)象聯(lián)系起來(lái)。DynamicFormQuestionComponent 會(huì)創(chuàng)建表單組，并用問(wèn)題模型中定義的控件來(lái)填充它們，并指定顯示和驗(yàn)證規(guī)則。

Path："src/app/dynamic-form-question.component.html" 。

    <div [formGroup]="form">
      <label [attr.for]="question.key">{{question.label}}</label>


      <div [ngSwitch]="question.controlType">


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


      </div>


      <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
    </div>

Path："src/app/dynamic-form-question.component.ts" 。

    import { Component, Input } from '@angular/core';
    import { FormGroup }        from '@angular/forms';


    import { QuestionBase }     from './question-base';


    @Component({
      selector: 'app-question',
      templateUrl: './dynamic-form-question.component.html'
    })
    export class DynamicFormQuestionComponent {
      @Input() question: QuestionBase<string>;
      @Input() form: FormGroup;
      get isValid() { return this.form.controls[this.question.key].valid; }
    }

DynamicFormQuestionComponent 的目標(biāo)是展示模型中定義的各類問(wèn)題。你現(xiàn)在只有兩類問(wèn)題，但可以想象將來(lái)還會(huì)有更多。模板中的 ngSwitch 語(yǔ)句會(huì)決定要顯示哪種類型的問(wèn)題。這里用到了帶有 formControlName 和 formGroup 選擇器的指令。這兩個(gè)指令都是在 ReactiveFormsModule 中定義的。

提供數(shù)據(jù)

還要另外一項(xiàng)服務(wù)來(lái)提供一組具體的問(wèn)題，以便構(gòu)建出一個(gè)單獨(dú)的表單。在本練習(xí)中，你將創(chuàng)建 QuestionService 以從硬編碼的范例數(shù)據(jù)中提供這組問(wèn)題。在真實(shí)世界的應(yīng)用中，該服務(wù)可能會(huì)從后端獲取數(shù)據(jù)。重點(diǎn)是，你可以完全通過(guò) QuestionService 返回的對(duì)象來(lái)控制英雄的求職申請(qǐng)問(wèn)卷。要想在需求發(fā)生變化時(shí)維護(hù)問(wèn)卷，你只需要在 questions 數(shù)組中添加、更新和刪除對(duì)象。

QuestionService 以一個(gè)綁定到 @Input() 的問(wèn)題數(shù)組的形式提供了一組問(wèn)題。

Path："src/app/question.service.ts" 。

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
  getQuestions() {


    let questions: QuestionBase<string>[] = [


      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Rating',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        order: 3
      }),


      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: 'Bombasto',
        required: true,
        order: 1
      }),


      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2
      })
    ];


    return of(questions.sort((a, b) => a.order - b.order));
  }
}

創(chuàng)建一個(gè)動(dòng)態(tài)表單模板

DynamicFormComponent 組件是表單的入口點(diǎn)和主容器，它在模板中用 <app-dynamic-form> 表示。

DynamicFormComponent 組件通過(guò)把每個(gè)問(wèn)題都綁定到一個(gè)匹配 DynamicFormQuestionComponent 的 <app-question> 元素來(lái)渲染問(wèn)題列表。

Path："src/app/dynamic-form.component.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>

Path："src/app/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',
      providers: [ QuestionControlService ]
    })
    export class DynamicFormComponent implements OnInit {


      @Input() questions: QuestionBase<string>[] = [];
      form: FormGroup;
      payLoad = '';


      constructor(private qcs: QuestionControlService) {  }


      ngOnInit() {
        this.form = this.qcs.toFormGroup(this.questions);
      }


      onSubmit() {
        this.payLoad = JSON.stringify(this.form.getRawValue());
      }
    }

顯示表單

要顯示動(dòng)態(tài)表單的一個(gè)實(shí)例，AppComponent 外殼模板會(huì)把一個(gè) QuestionService 返回的 questions 數(shù)組傳遞給表單容器組件 <app-dynamic-form>。

Path："src/app/app.component.ts" 。

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$ | async"></app-dynamic-form>
    </div>
  `,
  providers:  [QuestionService]
})
export class AppComponent {
  questions$: Observable<QuestionBase<any>[]>;


  constructor(service: QuestionService) {
    this.questions$ = service.getQuestions();
  }
}

這個(gè)例子為英雄提供了一個(gè)工作申請(qǐng)表的模型，但是除了 QuestionService 返回的對(duì)象外，沒(méi)有涉及任何跟英雄有關(guān)的問(wèn)題。這種模型和數(shù)據(jù)的分離，允許你為任何類型的調(diào)查表復(fù)用這些組件，只要它與這個(gè)問(wèn)題對(duì)象模型兼容即可。

確保數(shù)據(jù)有效

表單模板使用元數(shù)據(jù)的動(dòng)態(tài)數(shù)據(jù)綁定來(lái)渲染表單，而不用做任何與具體問(wèn)題有關(guān)的硬編碼。它動(dòng)態(tài)添加了控件元數(shù)據(jù)和驗(yàn)證標(biāo)準(zhǔn)。

要確保輸入有效，就要禁用 “Save” 按鈕，直到此表單處于有效狀態(tài)。當(dāng)表單有效時(shí)，你可以單擊 “Save” 按鈕，該應(yīng)用就會(huì)把表單的當(dāng)前值渲染為 JSON。

最終的表單如下圖所示。

注：

不同類型的表單和控件集合

本教程展示了如何構(gòu)建一個(gè)問(wèn)卷，它只是一種動(dòng)態(tài)表單。這個(gè)例子使用 `FormGroup` 來(lái)收集一組控件。有關(guān)不同類型動(dòng)態(tài)表單的示例，請(qǐng)參閱在 [響應(yīng)式表單](http://m.hgci.cn/angulerten/angulerten-yi9337wt.html) 中的創(chuàng)建動(dòng)態(tài)表單一節(jié)。那個(gè)例子還展示了如何使用 `FormArray` 而不是 `FormGroup` 來(lái)收集一組控件。

驗(yàn)證用戶輸入

[驗(yàn)證表單輸入](http://m.hgci.cn/angulerten/angulerten-gsm437ww.html) 部分介紹了如何在響應(yīng)式表單中進(jìn)行輸入驗(yàn)證的基礎(chǔ)知識(shí)。

Angular9 構(gòu)建動(dòng)態(tài)表單