Angular FormArray 디스플레이 유효성 검사 오류

Angular FormArray 디스플레이 유효성 검사 오류

FormBuilder의 도움으로 만들어진 Angular Form을 가지고 있습니다.

양식에는 사용자가 원하는 만큼의 필드가 있는 FormArray가 포함되어 있습니다.필드에 대한 검증자를 설정했습니다.

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

그리고 각각의 새로운.push유효성 검사기는 동일합니다.

문제는 특정 필드의 데이터에 액세스하는 방법을 모른다는 것입니다.isValid그들이 속박되어 있기 때문에 재산.FormControl경유로[formControlName]="index".

그렇게 하려고 했는데 잘 안 되는 것 같아요.

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

어디에array이다.formArray.controls부모로부터 물려받은.

업데이트 #1

https://stackblitz.com/edit/angular-7ppkoh 의 사례가 있습니다.

저는 이것이 템플릿에서 완전히 가능할 것이라고 생각하지 않습니다.템플릿에 있는 FormArray 컨트롤의 상태에 액세스하려면 다음과 같이 액세스해야 합니다.this.formGroup.get('features').controls[i].invalid하지만 그 이후로get유형의 인스턴스를 반환합니다.AbstractControl당신은 그것에 접근할 수 없을 것입니다.controls그 위에 배열.이를 위해, 당신은 무엇으로부터 반환되든 타이프캐스트를 해야 할 것입니다.this.formGroup.get('features')의 상태가.FormArray그리고 저는 그것이 템플릿에서 가능할 것이라고 생각하지 않습니다.

클래스에서 인덱스를 기반으로 컨트롤의 유효성을 반환하는 메서드를 만들어야 합니다.

계속해서 귀사의 스택 블리자드를 참조하면 다음과 같습니다.

<form [formGroup]="formGroup">
  <div formArrayName="features">
    <div 
      class="row no-gutters form-group" 
      *ngFor="let feature of features.controls; let index = index; let last = last">
      <input 
        type="text" 
        class="form-control px-2 col" 
        [formControlName]="index" 
        title="feature" 
        required>

        IS Invalid - {{ getValidity(index) }}

      <div class="col-3 col-md-2 row no-gutters">
        <button 
          class="col btn btn-outline-danger" 
          (click)="removeFeature(index)">
          -
        </button>
        <button 
          class="col btn btn-success" 
          *ngIf="last" 
          (click)="addFeature()">
          +
        </button>
      </div>
    </div>
  </div>
</form>

그리고 당신의 수업에서:

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(
    private fb: FormBuilder,
  ) {}

  formGroup = this.fb.group({
    features: this.fb.array([this.fb.control('', Validators.required)])
  });

  get features(): FormArray {
    return this.formGroup.get('features') as FormArray;
  }

  addFeature(): void {
    this.features.push(this.fb.control('', Validators.required));
  }

  getValidity(i) {
    return (<FormArray>this.formGroup.get('features')).controls[i].invalid;
  }

  removeFeature(index): void {
    this.features.removeAt(index);
    console.log(this.features);
  }

}

갱신하다

몇 달 전에 저는 데이터 바인딩 구문 중 하나(즉, 문자열 보간 -)에서 메서드를 호출한다는 것을 깨달았습니다.{{ ... }}속성 바인딩 -[propertyName]="methodName()"또는 속성 바인딩 -[class.class-name]="methodName()"OR[style.styleName]="methodName()")는 성능에 관한 한 매우 비용이 많이 듭니다.

따라서 다음을 사용해야 합니다.

{{ formGroup.controls['features'].controls[index].invalid }}

다음 대신:

{{ getValidity(index) }}

참조용 업데이트된 작업 샘플 스택 블리츠입니다.

만약 당신이 그것에 대해 더 알고 싶다면, 나는 당신이 이 스레드를 확인하는 것을 강력히 추천합니다.

Angular Performance: DOM 이벤트로 인해 불필요한 함수 호출이 발생합니다.

이것이 도움이 되길 바랍니다 :)

저는 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')

ngFor 문에서 폼 배열의 각 컨트롤에 사용할 변수 "기능"을 정의하고 있습니다.

*ngFor="let feature of features.controls; let index = index; let last = last"

이 변수를 사용하여 해당 컨트롤의 잘못된 상태를 가져올 수 있습니다.

feature.invalid 

여기 스택블리츠가 있습니다.

---

또한.

반응형 양식을 사용할 때 HTML에 필요한 속성이 필요하지 않습니다.

그래서 이거.

<input type="text" class="form-control px-2 col" [formControlName]="index" title="feature" required>

수 있습니다.

<input type="text" class="form-control px-2 col" [formControlName]="index" title="feature">

양식 컨트롤을 사용하여 이 작업을 신속하게 수행해야 합니다.

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

위와 같이 다음을 사용하여 답변합니다.

feature.invalidfeatures.controls

컨트롤 내부의 모든 요소를 한 번에 검증할 수 있습니다.

그러나 특정 요소의 유효성을 검사하려면 다음 코드를 사용할 수 있습니다.

> feature.controls.controlname.invalid

참고: 기능이 아닌 기능을 사용합니다.

FormGroup 클래스에는 지정된 키에 대한 추상 컨트롤을 반환하는 get 메서드가 있습니다.formControlName에서 사용하는 이름입니다.

에 두 링크가 . API 문서링다같습다니음과두.
제어 기능
그룹

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

formArray를 사용하여 폼을 만듭니다.

createForm() {
  this.studentForm = this.fb.group({
    name: [],
    id: [],
    hobbies: this.fb.array([])
  })
}

addHobbies() {
 const control = new FormControl(null, [Validators.required]);
 (<FormArray>this.studentForm.get('hobbies')).push(control);
}

사용자에게 오류 메시지를 인쇄하는 중

<form [formGroup]="studentForm" (submit)="saveStudent()">
  <input type="text" id="id" name="id" formControlName="id">
  <input type="text" id="name" name="name" formControlName="name">
  <div formArrayName="hobbies">
      <label>Hobbies</label>
      <button type="button" (click)="addHobbies()">Add Hobbies</button>
      <div *ngFor="let formControl of studentForm.get('hobbies')['controls']; let i = index">
          <input type="text" [formControlName]="i"> 
          <div *ngIf="!studentForm.get('hobbies')['controls'][i].valid && 
                      studentForm.get('hobbies')['controls'][i].errors?.required">
         <p>This field is required</p>
     </div>
      </div>
  </div>
  <button type="submit">Submit Student</button>
</form>

언급URL : https://stackoverflow.com/questions/52122433/angular-formarray-display-validation-errors