FormGroup을 사용하는 경우와양식 배열?

FormGroup을 사용하는 경우와양식 배열?

양식 그룹:

FormGroup은 각 하위 FormControl의 값을 각 컨트롤 이름을 키로 하는 하나의 개체로 집계합니다.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

양식 배열:

FormArray는 각 자식 FormControl의 값을 배열로 집계합니다.

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

하나는 언제 다른 하나보다 더 사용해야 합니까?

FormArray는 FormGroup의 변형입니다.중요한 차이점은 데이터가 어레이로 직렬화된다는 것입니다(FormGroup의 경우 개체로 직렬화되는 것과 달리).이 기능은 동적 양식과 같이 그룹 내에 얼마나 많은 컨트롤이 있는지 모를 때 특히 유용할 수 있습니다.

간단한 예를 들어 설명해 보겠습니다.예를 들어, 피자에 대한 고객의 주문을 캡처하는 양식이 있습니다.버튼을 눌러 특별한 요청을 추가하거나 제거할 수 있습니다.다음은 구성 요소의 html 부분입니다.

<section>
  <p>Any special requests?</p>
  <ul formArrayName="specialRequests">
    <li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
      <input type="text" formControlName="{{i}}">
      <button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
    </li>
  </ul>
  <button type="button" (click)="onAddSpecialRequest()">
    Add a Request
  </button>
</section>

다음은 특수 요청을 정의하고 처리하는 구성 요소 클래스입니다.

constructor () {
  this.orderForm = new FormGroup({
    firstName: new FormControl('Nancy', Validators.minLength(2)),
    lastName: new FormControl('Drew'),
    specialRequests: new FormArray([
      new FormControl(null)
    ])
  });
}

onSubmitForm () {
  console.log(this.orderForm.value);
}

onAddSpecialRequest () {
  this.orderForm.controls
  .specialRequests.push(new FormControl(null));
}

onRemoveSpecialRequest (index) {
  this.orderForm.controls['specialRequests'].removeAt(index);
}

FormArray는 FormGroup의 "addControl", "removeControl", "setValue" 등을 사용하는 것보다 "push", "insert" 및 "removeAt"를 사용하여 FormControl을 조작하는 것이 더 쉽다는 점에서 FormGroup보다 더 유연합니다.FormArray 메서드는 컨트롤이 양식의 계층 구조에서 올바르게 추적되도록 합니다.

이게 도움이 되길 바랍니다.

반응형 폼을 만들려면 부모가FormGroup필수입니다.이것.FormGroup을 추가로 포함할 수 있습니다.formControls,어린아이formGroups또는formArray

FormArray의 배열을 추가로 포함할 수 있습니다.formControls또는formGroup그 자체로

formArray는 언제 사용해야 합니까?

의 사용법을 설명하는 이 아름다운 게시물을 읽어주세요.formArray

그 블로그의 흥미로운 예는 여행에 관한 것입니다.formGroup

여행의 구조formGroup사용.formControl그리고.formArray다음과 같이 보입니다.

this.tripForm = this.fb.group({
    name: [name, Validators.required],
     cities: new FormArray(
       [0] ---> new FormGroup({
           name: new FormControl('', Validators.required),
               places: new FormArray(
                  [0]--> new FormGroup({
                      name: new FormControl('', Validators.required),
                         }),
                      [1]--> new FormGroup({
                         name: new FormControl('', Validators.required),
                      })
                  )
              }), 
       [1] ---> new FormGroup({
           name: new FormControl('', Validators.required),
           places: new FormArray(
               [0]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               }),
               [1]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               })
               )
      }))
})

이 DEMO를 사용하는 것을 잊지 말고 다음을 위해 어레이를 사용하십시오.cities그리고.places여행의

보낸이: 안톤 모이제브의 책 "유형 스크립트를 사용한 각도 개발, 제2판" :

양식에 컨트롤을 프로그래밍 방식으로 추가(또는 제거)해야 하는 경우 FormArray를 사용합니다.FormGroup과 비슷하지만 길이 변수가 있습니다.FormGroup은 전체 양식 또는 양식 필드의 고정 하위 집합을 나타내는 반면 FormArray는 일반적으로 증가하거나 축소할 수 있는 양식 컨트롤 모음을 나타냅니다.

예를 들어 FormArray를 사용하여 사용자가 임의 개수의 전자 메일을 입력할 수 있습니다.

각도 설명서를 보면 다음과 같은 것을 알 수 있습니다.

FormArray는 FormGroup 대신 명명되지 않은 컨트롤을 여러 개 관리할 수 있습니다.양식 그룹 인스턴스와 마찬가지로 양식 배열 인스턴스에서 컨트롤을 동적으로 삽입 및 제거할 수 있으며, 양식 배열 인스턴스 값과 유효성 검사 상태는 하위 컨트롤에서 계산됩니다.그러나 각 컨트롤의 키를 이름으로 정의할 필요는 없으므로 하위 값의 수를 미리 모르는 경우에는 이 옵션이 좋습니다.

그들의 예를 보여드리고 제가 이것을 어떻게 이해하는지 설명해 보겠습니다.여기에서 소스를 볼 수 있습니다.

마녀가 다음 필드를 갖는 형태를 상상해 보십시오.

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

에 기여있습다니가 있습니다.firstName,lastName,address그리고.aliases는 모든 을 필드양그모포필다장니합드로 묶습니다.group에 ㅠㅠㅠaddress하위 그룹과 같아서 다른 그룹으로 포장합니다.group(템플릿을 보면 더 잘 이해할 수 있습니다)!모든 양식 컨트롤이 여기에 있습니다.key외하고를 aliases그리고 그것은 당신이 그것의 값들을 원하는 만큼 밀어넣을 수 있다는 것을 의미합니다.formBuilder과 같은 방법push.

이게 제가 이해하는 방법입니다, 누군가에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/41288928/when-to-use-formgroup-vs-formarray