web-dev-qa-db-ja.com

Angular FormArray表示検証エラー

私はAngular FormBuilderの助けを借りて構築されたフォームを持っています。

Formには、ユーザーが必要な数のフィールドを持つFormArrayが含まれています。フィールドにバリデーターを設定しました

this.fb.array([this.fb.control('', Validators.required)])

そして、それぞれの新しいPushバリデーターは同じです。

問題は、特定のフィールドのisValidプロパティが[formControlName]="index"を介してFormControlにバインドされているため、それらにアクセスする方法がわからないことです。

私はそのようにしようとしましたが、それはうまくいかないようです

<div *ngIf="array.at(index).invalid" class="alert alert-danger p-2">
</div>

ここで、arrayは、親から渡されたformArray.controlsです。

アップデート＃1

ケースがある https://stackblitz.com/edit/angular-7ppkoh

angularformstypescriptvalidationangular2-form-validation
12
Sergey

この例はangular 8.にあります。

これを行うときのテンプレート。

_<ng-container formArrayName="calibers">
        <ng-container *ngFor="let item of qualityForm.get('calibers')['controls']; let index = index" [formGroupName]="index.toString()">
          <ion-item>
            <ion-label position="floating">{{ getCaliberName(item) }}</ion-label>
            <ion-input formControlName="percentage" placeholder="Input Percentage" type="number" clearInput></ion-input>
            <ng-container *ngIf="item.get('percentage').hasError('required')">
              <span class="errorMsg">Input Percentage</span>
            </ng-container>
            <ng-container *ngIf="item.get('percentage').hasError('max')">
              <span class="errorMsg">Percentage cannot be greater than 100</span>
            </ng-container>
          </ion-item>
        </ng-container>
      </ng-container>
_

NgForのその項目オブジェクトは、フォームコントロールへのアクセスを提供します。配列形式のエラーを取得するために必要なのはitem.get('percentage').hasError('required')だけです

1
Luis Contreras

あなたはそれを鋭く達成するためにフォームコントロールを使うべきです。

<div *ngIf="formGroup.get('features').controls[i].controls.index.invalid && (formGroup.get('features').controls[i].controls.index.dirty || formGroup.get('features').controls[i].controls.index.touched)"                                          class="text-center error">
<p [hidden]="!formGroup.get('features').controls[i].controls.index.errors.required">Index is required.</p>
</div>
0
BabuRaj Thirumalai

上記のように使用して答え

feature.invalid from features.controls

そのコントロール内のすべての要素を一度に検証できます。

ただし、特定の要素を検証する場合は、次のコードを使用できます。

> feature.controls.controlname.invalid

注：機能ではなく機能を使用しています

0
Mujthaba Ibrahim

FormGroupクラスには、指定されたキーのabstractControlを返すgetメソッドがあります。 formControlNameで使用するもの。

ここに両方の​​APIドキュメントのリンク：
AbstractControl
FormGroup

<form [formGroup]="form">
  <input formControlName="name" type="text" />
  <div *ngIf="form.get('name').invalid">
    <p><Message you like to show/p>
  </div>
</form>
0
Marlaqk