角度での反応形式の配列

この記事では、FormatArrayの妥当性検査を作成して適用するプロセスを紹介します
どのような配列ですか
FormatArrayは抽象グループコントロール、FormControl、FormControl、または別のFormatArrayのコレクションを管理する責任があります.FormArrayは、FormControlとFormgroupとともに、角度でフォームを定義するために使用される3つの基本的なビルディングブロックの一つです.
注意:ドロップダウンの場合、アングルsyncfusionを使いました.パッケージをインストールしてパッケージをインポートしてください.他のパッケージも使用できます

フォーム配列を作成する手順をさらに表示します

a . importモジュールとreactiveformsモジュールをアプリケーションにインポートします.モジュールです.tsファイル.
b .コンポーネントファイルで、formgroup変数を追加しました.

addMemberItemInputForm = {} as FormGroup;

c .コンストラクタでのFormBuilderの呼び出し

private formBuilder: FormBuilder

d .現在のフォームコントロールを初期化します.コントロールに必要な妥当性検査を追加します.ここでは、詳細は以下のコードのフォーム配列で宣言され、5行だけを追加できるフォーム配列に対する共通の検証を追加しました.削除または変更できます.

createAddMemberItemInputForm(){
  this.addMemberItemInputForm = this.formBuilder.group({
     memberName: ['', Validators.required],
     itemType: ['', Validators.required],
     itemDetails: this.formBuilder.array(
    [this.createEmpFormGroup()],
    [Validators.required, Validators.maxLength(5)])
   });
 }

E .オブジェクトをプロパティにバインドするには、getterを使用しますcreateAddMemberItemInputForm() MemberNameオブジェクトのプロパティをバインドしますget memberName()

 get memberName() {
    return this.addMemberItemInputForm.get('memberName');
 }

f .すべてのコントロールでこのようにgetter関数を作成します.
g .フォーム配列で関数と呼ばれる関数がありますthis.createEmpFormGroup() これは、コードベローのようなフォーム配列のコントロールを初期化するために使用されます

createEmpFormGroup(){
   return this.formBuilder.group({
     itemName: ['', [Validators.required]],
     quantity: ['', [Validators.required, Validators.max(5)]],
     price: ['', [Validators.required]]
   })
 }

h .フォーム配列のコントロールの追加と削除行を作成する

addEmployee() {
  let newMem = this.createEmpFormGroup();
  this.itemDetails.push(newMem);
}

deleteEmployee(i: number) {
  this.itemDetails.removeAt(i);
}

I . html側に来るフォームグループとFormControlName
外部フォーム制御

<div class="col-6">
   <label class="form-label">Enter Member Name</label>
   <input type="text" class="form-control" placeholder="Member Name" formControlName="memberName">
  <label *ngIf="memberName?.invalid && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
   Team name is required.
  </label>
</div>

フォームアレイ用

<tbody formArrayName="itemDetails">
  <tr  *ngFor="let item of itemDetails.controls; let i = index" [formGroupName]="i">
   <td>
    <input type="text" class="form-control" placeholder="Enter Item Name" formControlName="itemName">
    <label *ngIf="itemDetails.controls[i].get('itemName')?.errors?.['required'] && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
     Employee name required.
  </label>
 </td>
<td>

lこのステップに到達すると、ほぼ適切な検証を行うフォーム配列が実装されます.
ライブプレビューによるM .コード全体はGithubにあります.
githubで利用できるコード:-[(https://github.com/justinthadathil/AngularFormArray ]
ライブプレビューhttps://justinthadathil.github.io/AngularFormArray/ ]