これまでに何らかの種類のアプリケーションを作成してきた場合、チェックボックスが持つ大きな重要性をすでに認識しています。どのプラットフォームでもデータの入力が簡単になるだけでなく、リスト機能にパッケージ化されていることが多いため、データの迅速な並べ替えも容易になります。この記事では、angular8にチェックボックスを次の順序で作成する方法を説明します。
Angular8でチェックボックスを作成する
Angular8でチェックボックスを作成する手順を説明するために、選択できる注文のリストがある例を見てみましょう。これは、チェックボックスの形式でユーザーに通知する必要があります。これを行うには、以下のコードに従ってください。
constordersData = [{id：1、name： 'order 1'}、{id：2、name： 'order 2'}、{id：3、name： 'order 3'}、{id：4、name： '注文4'}]この場合、データはすでに存在しているため、上記で共有したコードを使用しました。実際のシナリオでは、このデータはAPIを介してインポートされる可能性があります。
この例では、リアクティブフォームを使用して、最終結果をよりクリーンで効率的にすることもできます。これを行う方法を理解するために、以下の例を見てください。
import {Component} from '@ angular / core' import {FormBuilder、FormGroup} from '@ angular / forms' @Component（{selector： 'my-app'、templateUrl： './ app.component.html'、styleUrls： ['./app.component.css']}）export class AppComponent {form：FormGroupordersData = []コンストラクター（privateformBuilder：FormBuilder）{this.form = this.formBuilder.group（{orders：[]}）}参加する（） { ... } }上記のコードでは、以下を利用しています。
クラスjavaのインスタンス
- FormGroups： これは単一のフォームを表します。
- FormControl： これは、単一のフォームへの単一のエントリを表します。
- FormArray： これは、すべてのFormControlのコレクションを表すために使用されます。
上記の例では、FormBuilderサービスを使用して、次のようなフォームを作成することもできます。
参加する
上記の例では、[formGroup] =” form”を使用してフォームをform要素にバインドしています。
基本フォームが作成されたので、次に示すように、FormArrayを使用してフォームに動的性を追加しましょう。
import {Component} from '@ angular / core' import {FormBuilder、FormGroup、FormArray、FormControl、ValidatorFn} from '@ angular / forms' @Component（{selector： 'my-app'、templateUrl： './ app.component .html '、styleUrls：[' ./app.component.css']}）export class AppComponent {form：FormGroupordersData = [{id：100、name： 'order 1'}、{id：200、name： ' order 2 '}、{id：300、name：' order 3 '}、{id：400、name：' order 4 '}]コンストラクター（privateformBuilder：FormBuilder）{this.form = this.formBuilder.group（{注文：new FormArray（[]）}）this.addCheckboxes（）} private addCheckboxes（）{this.ordersData.forEach（（o、i）=> {const control = new FormControl（i === 0）// if最初の項目がtrueに設定され、それ以外の場合はfalse（this.form.controls.orders as FormArray）.push（control）}）} submit（）{const selectedOrderIds = this.form.value.orders .map（（v、i）= > v？this.orders [i] .id：null）.filter（v => v！== null）console.log（selectedOrderIds）}}上記の例では、ループを繰り返すたびに、新しいFormControlを作成し、FormArrayから注文を受け取りました。最初のコントロールをtrueに設定したため、デフォルトで最初の順序がリストからチェックされています。
この後、ユーザーに表示する必要のある特定の注文情報を取得するために、FormArray要素をこのテンプレートにバインドする必要があります。
{{ordersData [i] .name}}送信出力：
Angular8でのチェックボックスの検証
チェックボックスを検証する方法については、以下の例をご覧ください。
{{ordersData [i] .name}}少なくとも1つの注文を選択する必要がありますsubmit ... export class AppComponent {form：FormGroupordersData = [...]コンストラクター（privateformBuilder：FormBuilder）{this.form = this.formBuilder .group（{orders：new FormArray（[]、minSelectedCheckboxes（1））}）this.addCheckboxes（）} ...} function minSelectedCheckboxes（min = 1）{const validator：ValidatorFn =（formArray：FormArray）=> { const totalSelected = formArray.controls //チェックボックス値のリストを取得します（ブール値）.map（control => control.value）//チェックされたチェックボックスの数を合計します.reduce（（prev、next）=> next？prev + next：prev、0）//合計が最小値より大きくない場合は、エラーメッセージを返しますreturn totalSelected> = min？ null：{必須：true}}バリデータを返す}出力：
ASyncフォームコントロールの追加
動的チェックボックスを追加する方法がわかったので、これらのフォームにASyncを追加する方法を見てみましょう。
import {Component} from '@ angular / core' import {FormBuilder、FormGroup、FormArray、FormControl、ValidatorFn} from '@ angular / forms' import {of} from'rxjs '@Component（{selector：' my-app '、 templateUrl： './ app.component.html'、styleUrls：['./ app.component.css']}）export class AppComponent {form：FormGroupordersData = []コンストラクター（privateformBuilder：FormBuilder）{this.form = this.formBuilder.group（{orders：new FormArray（[]、minSelectedCheckboxes（1））}）//同期注文this.ordersData = this.getOrders（）this.addCheckboxes（）} private addCheckboxes（）{this.ordersData。 forEach（（o、i）=> {const control = new FormControl（i === 0）//最初の項目がtrueに設定されている場合、それ以外の場合はfalse（this.form.controls.orders as FormArray）.push（control）} ）} getOrders（）{return [{id：100、name： 'order 1'}、{id：200、name： 'order 2'}、{id：300、name： 'order 3'}、{id： 400、name： 'order 4'}]} submit（）{const selectedOrderIds = this.form.value.orders .map（（v、i）=> v？this.ordersData [i] .id： null）.filter（v => v！== null）console.log（selectedOrderIds）}} ... import {of} from'rxjs '...コンストラクター（privateformBuilder：FormBuilder）{this.form = this。 formBuilder.group（{orders：new FormArray（[]、minSelectedCheckboxes（1））}）//非同期注文（httpサービス呼び出しの場合もあります）of（this.getOrders（））。subscribe（orders => {this.ordersData =注文this.addCheckboxes（）}）//同期注文// this.ordersData = this.getOrders（）// this.addCheckboxes（）}これで、記事は終わりです。これで、angular8にチェックボックスを追加する方法がわかったので、日常のコーディングでそれを利用できることを願っています。
文字列pythonを逆にする方法
Angularの構成要素がわかったので、 Edurekaによる。 Angularは、スケーラブルでエンタープライズなパフォーマンスのクライアント側Webアプリケーションを作成するために使用されるJavaScriptフレームワークです。 Angularフレームワークの採用率が高いため、アプリケーションのパフォーマンス管理はコミュニティ主導であり、間接的により良い雇用機会を促進しています。 Angular認定トレーニングは、エンタープライズアプリケーション開発に関するこれらすべての新しい概念をカバーすることを目的としています。