リアクティブ フォームの統合

    Ignite UI for Angular コントロールは、フォーム入力を処理するためのモデル駆動型のアプローチを提供する Reactive フォームで簡単に統合できます。

    Angular リアクティブ フォームの統合の例

    次のサンプルは、リアクティブ フォームで使用される場合の igx-input-groupigx-select、および igx-combo コントロールを示しています。

    使用方法

    はじめに

    リアクティブ フォームを使用する前に、Ignite UI コンポーネントのすべてのモジュールと ReactiveFormsModule をインポートします。

    // app.module.ts
    
    ...
    import { IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule } from "igniteui-angular";
    import { ReactiveFormsModule } from "@angular/forms";
    
    @NgModule({
        ...
        imports: [..., IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule, ReactiveFormsModule],
        ...
    })
    export class AppModule {}
    

    リアクティブ フォームについては、こちら を参照してください。

    フォームの作成

    フォームのモデルを設定するには、form 要素の formGroup プロパティを使用します。次に、各モデル プロパティに対応する各入力フィールドに formControlName を追加します。

    <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()">
        <h4>Book your movie ticket</h4>
        <igx-select #select name="movies" formControlName="movie">
            <igx-select-item-group *ngFor="let genre of genres" [label]="genre.type">
                <igx-select-item *ngFor="let movie of genre.movies" [value]="movie">
                    {{ movie }}
                </igx-select-item>
            </igx-select-item-group>
            <label igxLabel for="movies">Movie</label>
            <ng-template igxSelectToggleIcon>
                <igx-icon fontSet="material">local_movies</igx-icon>
            </ng-template>
        </igx-select>
        <igx-input-group>
            <input igxInput name="fullName" type="text" formControlName="fullName"/>
            <label igxLabel for="fullName">Full Name</label>
            <igx-suffix>
                <igx-icon>person</igx-icon>
            </igx-suffix>
        </igx-input-group>
        ...
         <igx-combo #combo1 class="input-container" width="100%" [itemsMaxHeight]="130"
            [data]="genres" [valueKey]="'type'" [displayKey]="'type'"
            type="line" formControlName="genres"
            placeholder="Select your favorite genres" searchPlaceholder="Search...">
        </igx-combo>
        ...
    

    フォームの formGroup プロパティに設定したオブジェクトはフォーム モデルで formGroup タイプである必要があります。Angular のリアクティブ フォームのチュートリアルでは、デモのコンストラクターに FormBuilder を定義して異なるフォーム フィールドを定義する必要があります。

    export class ReactiveFormsSampleComponent {
    
        public user: FormGroup;
        constructor(fb: FormBuilder) {
            this.user = fb.group({
                date: [""],
                dateTime: [""],
                email: ["", Validators.required],
                fullName: ["", Validators.required],
                genres: ["", Validators.required],
                movie: ["", Validators.required],
                phone: [""]
            });
        }
    }
    

    この例では、moviefullNameemail、および genresのフィールドが必要となり、値がない場合は送信されません。

    API リファレンス

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。